Pause video on slide

[REEDOOX]

Hello, thank you for this amazing library, my issue is the videos on the carousel do not pause until you swipe twice, if the video is in index 0, and the user swipes to index 1, the video sound can still be heard, but once the user swipes to slide 2, the video stops. This behaviour is exactly what I need, but I still can't figure out why the video doesn't pause on the next slide.

Thanks in advance

[trolit]

Hi @REEDOOX

try to make use of onTransitionStart property provided by Awesome Slider component. It gets called just after firing slide change event. So before the transition happens, you would ask for the video and stop it if it is still running. We can access object which holds HTML part to refer to video object and pause it.

I've took fragment from CodeSandbox sample provided by @rcaferati and adjusted it to satisfy your problem.

<AwesomeSlider
      className="awesome-slider"

      onTransitionStart={(e) => {
            var video = e.currentSlide.querySelector("video");
            // console.log(video);
            if (video !== null && !video.paused) {
               video.pause();
             }
      }}
>

You can check on yourself in the CodeSandbox here: https://codesandbox.io/s/awesome-slider-basic-video-m9j9s (overwrite line 10 with above sample)

Happy coding:)

[REEDOOX]

Worked like a charm thank you very much 👍