GET A QUOTE

Owl Carousel Slide to Next Slide after video Complete

owl carousel slide to next slide after video complete

Owl Carousel is a popular jQuery plugin for creating responsive and customizable image and content sliders on your website. A common requirement is to play a video once on the first slide and then automatically switch to autoplay mode for the rest of the slider images. In this article, we will discuss how to achieve this functionality using Owl Carousel and provide a step-by-step guide with detailed code explanations to help you implement it( owl carousel slide to next slide after video complete ).

Question from Stackoverflow:
My problem is owl carousal using home slider, images and including video also. So we need first slider it’s video playing, video time duration is (60sec+). Once finish this video slider, then automatically start the remaining slider images. 
Owl carousal first slide video once finished then start the remaining slider images autoplay

Table of Contents

Building an owl carousel

Before we get into the code, make sure you’ve added Owl Carousel to your webpage. You can download it from the Owl Carousel website or use a CDN to add the necessary CSS and JavaScript files. Here is a basic setup:

				
					<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="path-to-your-owl-carousel/owl.carousel.min.css">
    <script src="path-to-your-owl-carousel/jquery.min.js" defer></script>
    <script src="path-to-your-owl-carousel/owl.carousel.min.js" defer></script>
</head>
<body>
    <div class="owl-carousel">
        <!-- Your slides go here -->
    </div>

    <script>window.addEventListener('DOMContentLoaded', function() {
        $(document).ready(function() {
            $(".owl-carousel").owlCarousel({
                items: 1, // Set the number of items to 1 for single-slide mode
                autoplay: false, // Disable autoplay
                autoplayTimeout: 5000, // Set the autoplay interval in milliseconds (e.g., 5 seconds)
            });
        });
    });</script>
<script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script></body>
</html>

				
			

Step 1: HTML Structure

The HTML code sets up the structure for the Owl Carousel and its slides, which can contain both videos and images.

				
					<div class="owl-carousel">
    <div class="item video-slide">
        <video class="slider-video" width="100%" height="100%" autoplay muted>
            <source src="your-video.mp4" type="video/mp4">
        </video>
    </div>
    <div class="item">
        <img decoding="async" src="your-image-1.jpg" alt="Image 1" title="Owl Carousel Slide to Next Slide after video Complete">
    </div>
    <div class="item">
        <img decoding="async" src="your-image-2.jpg" alt="Image 2" title="Owl Carousel Slide to Next Slide after video Complete">
    </div>
    <!-- Add more video and image slides as needed -->
</div>

				
			

Explanation:

  • This structure includes a video slide as the first item and image slides afterward.
  • The <video> element contains the video to be played. Replace "your-video.mp4" with the actual path to your video file.
  • The subsequent slides are image slides, each with its respective image source.

Step 2: CSS Styling

This section provides basic CSS styling for the Owl Carousel and its slides.

				
					
    .owl-carousel {
        margin-bottom: 20px;
    }

    .owl-carousel .item {
        text-align: center;
    }

    .video-slide {
        position: relative;
        padding-bottom: 56.25%; /* 16:9 aspect ratio for video */
    }

    .video-slide video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }


				
			

Explanation:

  • The CSS code ensures that the carousel and its slides are styled properly.
  • The video-slide class is used to create a responsive video container with a 16:9 aspect ratio.

Step 3: JavaScript Initialization

In this part, the Owl Carousel is initialized with various options.

				
					
$(document).ready(function () {
        var owl = $(".owl-carousel").owlCarousel({
            items: 1,               // Number of items to show (1 for single-slide mode)
            autoplay: false,        // Disable Owl Carousel autoplay initially
            loop: false,            // Disable looping
            animateOut: 'fadeOut',  // Use a fade-out animation
            smartSpeed: 1000,       // Set the speed of transitions
            autoplayTimeout: 8000, // Set the autoplay timeout to 8 seconds
            autoplaySpeed: 8000,   // Set the speed of autoplay to 8 seconds
            margin: 0,              // Set the margin between items
            dots: true,             // Show navigation dots
            dotsClass: 'hero-dots'  // Define the class for navigation dots
        });

				
			

Explanation:

The Owl Carousel is initialized with options:

      • items: 1 ensures that only one slide is visible at a time (single-slide mode).
      • autoplay: false initially disables autoplay.
      • loop: false prevents looping, so the carousel stops after all slides.
      • animateOut: 'fadeOut' applies a fade-out transition effect.
      • smartSpeed: 1000 sets the transition speed to 1000 milliseconds (1 second).
      • autoplayTimeout: 8000 sets the autoplay timeout to 8 seconds.
      • autoplaySpeed: 8000 controls the speed of autoplay.
      • margin: 0 sets the margin between items to 0.
      • dots: true shows navigation dots, and dotsClass defines a custom class for them.

Step 4: Handling Video Playback and Autoplay

				
					        // Get all video slides
        var videoSlides = owl.find('.video-slide video');

        // Function to play the next slide when a video ends
        function playNextSlide() {
            owl.trigger('next.owl.carousel');
        }

        // Listen for the 'ended' event of all video slides
        videoSlides.on('ended', playNextSlide);

				
			

Explanation:

  • This part identifies video slides and sets up a function to play the next slide when a video ends.
  • It listens for the ‘ended’ event on each video element, and when a video ends, it triggers the playNextSlide function to move to the next slide.

Step 5: Handling Slide Change Events

				
					        // Function to manually trigger the next slide after a fixed duration
        function playNextSlideAfterDuration(duration) {
            setTimeout(function () {
                owl.trigger('next.owl.carousel');
            }, duration);
        }

        // Listen for Owl Carousel slide change events
        owl.on('changed.owl.carousel', function (event) {
            var currentSlide = event.item.index;
            var currentSlideType = owl.find('.owl-item').eq(currentSlide).find('.video-slide').length > 0;

            if (currentSlideType) {
                owl.trigger('stop.owl.autoplay'); // Disable autoplay for video slide
            } else {
                playNextSlideAfterDuration(5000); // Enable autoplay for image slides after 5 seconds
            }
        });
    });
</script>

				
			

Explanation:

  • This section defines the playNextSlideAfterDuration function to manually trigger the next slide after a specified duration (5 seconds in this case).
  • It listens for Owl Carousel slide change events and checks whether the current slide is a video slide or an image slide.
  • For video slides, it disables autoplay. For image slides, it enables autoplay after a 5-second delay.

By following these steps and understanding the provided code, you can implement an Owl Carousel with specific behavior for video and image slides. Make sure to replace the placeholder URLs with your actual video and image sources, and customize the options and timing according to your requirements.

Owl Carousel Slide to Next Slide after video Complete (Full Code)

				
					<!DOCTYPE html>
<html lang="en">
<head>
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Owl Carousel Video Autoplay</title>
    <!-- Include jQuery and Owl Carousel -->
    <link data-minify="1" rel="stylesheet" href="https://mdasik.com/wp-content/cache/min/1/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css?ver=1727807203">
    <script data-minify="1" src="https://mdasik.com/wp-content/cache/min/1/jquery-3.6.0.min.js?ver=1727807204" defer></script>
    <script data-minify="1" src="https://mdasik.com/wp-content/cache/min/1/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js?ver=1727807204" defer></script>
</head>
<body>


<div class="owl-carousel">
    <div class="item video-slide">
        <video class="slider-video" width="100%" height="100%" autoplay muted>
            <source src="your-video.mp4" type="video/mp4">
        </video>
    </div>
    <div class="item">
        <img decoding="async" src="your-image-1.jpg" alt="Image 1" title="Owl Carousel Slide to Next Slide after video Complete">
    </div>
    <div class="item">
        <img decoding="async" src="your-image-2.jpg" alt="Image 2" title="Owl Carousel Slide to Next Slide after video Complete">
    </div>
    <!-- Add more video and image slides as needed -->
</div>

<style>
    .owl-carousel {
        margin-bottom: 20px;
    }

    .owl-carousel .item {
        text-align: center;
    }

    .video-slide {
        position: relative;
        padding-bottom: 56.25%; /* 16:9 aspect ratio for video */
    }

    .video-slide video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
</style>

<script>window.addEventListener('DOMContentLoaded', function() {
$(document).ready(function () {
        var owl = $(".owl-carousel").owlCarousel({
            items: 1,
            autoplay: false, // Disable Owl Carousel autoplay initially
            loop: false,
            animateOut: 'fadeOut',
            smartSpeed: 1000,
            autoplayTimeout: 8000,
  			autoplaySpeed: 8000,
  			margin: 0,
  			dots: true,
  			dotsClass: 'hero-dots'
        });

        // Get all video slides
        var videoSlides = owl.find('.video-slide video');

        // Function to play the next slide when a video ends
        function playNextSlide() {
            owl.trigger('next.owl.carousel');
        }

        // Listen for the 'ended' event of all video slides
        videoSlides.on('ended', playNextSlide);
		// Function to manually trigger the next slide after a fixed duration
    function playNextSlideAfterDuration(duration) {
        setTimeout(function () {
            owl.trigger('next.owl.carousel');
        }, duration);
    }
    
        // Listen for Owl Carousel slide change events
        owl.on('changed.owl.carousel', function (event) {
            var currentSlide = event.item.index;
            var currentSlideType = owl.find('.owl-item').eq(currentSlide).find('.video-slide').length > 0;

            // If the current slide is a video slide, disable autoplay
            if (currentSlideType) {
                owl.trigger('stop.owl.autoplay');
            } else {
                // If it's an image slide, enable autoplay
               // owl.trigger('play.owl.autoplay');
               playNextSlideAfterDuration(5000);
            }
        });
    });
});</script>

</body>
</html>

				
			

Output:

Conclusion

In this article, we’ve shown you how to create an owl carousel that plays a video on the first slide and autoplays for the rest of the slides. By following the steps outlined and understanding the code changes, you can improve your website’s user experience by seamlessly integrating videos into your sliders. Feel free to further customize the code to fit your specific needs and design preferences.

I hope this article helped you to learn How to slide Owl Carousel to Next Slide after video Complete. If you have any doubts or problem with the code, comment below to find the solutions. Also share this blog if you find this useful.

Want to build professional website for your Business or Store, Get a free quote here

Click here to get Premium Plugins and Themes at rs.249. Get 20% Off on your first order “WELCOME20”

Related Posts

Write a comment

Recent Posts

Categories

Categories

Tags

SCAN ME TO GET CURRENT PAGE LINK
Md Asik QR Code
Thank you for submitting. We’ll get back to you shortly