How to pause video in Slick slider on slide change

In this Article we will learn how to pause video in Slick slider on slide change, In the world of web development, some time we must have a requirement of playing the videos in slideshow or playing the video when slide changes, and the most popular way to implementing carousels due to its flexibility and ease of use. but on slide changes we face multiple video playing on backend while slide changes, because the previous video is not paused, so lets first understand why we must pause video in a slider.

Why we need to Pause Videos in a Slider?

When users navigate through a slider, they must face distraction with multiple video playing, also it will consume bandwidth of the user network along with that we may face performance issues on the website,  By implementing a pause feature, you can enhance user engagement and improve the overall experience on your website.

So in this article we will write JavaScript to pause video in Slick slider on slide change, so user can easily play between the sliders, so the basic logic we need to apply is to pause the pervious playing video on slide change.Slick slider is already exposing the method beforeChange we can use that, so lets implimenta that with below steps.

Implementing video pause in Slick slider on next slide

Let start with creating a simple slick slider which contains video in each fours slider as below

  <div class="video-slider">
      <div>
        <video
          src="https://videos.pexels.com/video-files/5377270/5377270-uhd_2560_1440_25fps.mp4"
          class="slider-video"
          controls
        ></video>
      </div>
      <div>
        <video
          src="https://videos.pexels.com/video-files/5377647/5377647-uhd_2560_1440_25fps.mp4"
          class="slider-video"
          controls
        ></video>
      </div>
      <div>
        <video
          src="https://videos.pexels.com/video-files/1350205/1350205-hd_1920_1080_30fps.mp4"
          class="slider-video"
          controls
        ></video>
      </div>
    </div>

In above code we have created HTML structure of slick slider where we have added videos in each slide, the video will auto play once the slider changes

Now below is the script to play the slick slide

$('.video-slider').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  asNavFor: '.slider-for',
  dots: true,
  centerMode: true,
  focusOnSelect: true
});
		

Now we will write a method to play pause a video when slick slider changes , just add this function below to above one.

$('.video-slider').on('beforeChange', function(event, slick, currentSlide, nextSlide) {
                const currentVideo = $(slick.$slides[currentSlide]).find('video').get(0);
                if (currentVideo) {
                    currentVideo.pause();
                }
            });

Now lets put all the code togrther, make sure you must have jquery in your website to run slick slider

    $(document).ready(function () {
      $(".video-slider").slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        asNavFor: ".slider-for",
        dots: true,
        centerMode: true,
        focusOnSelect: true,
      });
      $(".video-slider").on(
        "beforeChange",
        function (event, slick, currentSlide, nextSlide) {
          const currentVideo = $(slick.$slides[currentSlide])
            .find("video")
            .get(0);
          if (currentVideo) {
            currentVideo.pause();
          }
        }
      );
    });

by implimenting above steps you can easlity achieve slick carousel pause videos when user changes slides functionality, it is already a built functionality by slick slider onliy what we need ti implment in beforeChange to play current slide video and pause the previous slide video.

DEMO

More Into Slick Slider