Slider pauses auto-play slides when reached the slide with video

Design help Webflow integrations
1

Hi. I have a webflow slider element with 7 slides. Each slides do have images except the last one. The last one has a video. Auto-play slides is turned on in the slider. What i’m trying to figure out is to pause the auto-play slide when reached the slide with video and will automatically play the video. When the video is finished, the auto-play slide will continue.

Is there someone who can help? Thanks in advance!

2

@Jared_Balajadia Could you please share the read-only or live link you have?

3

This is the published link: https://test-celerity.webflow.io/
This is the read-only link: Webflow - Test Celerity

4

@Jared_Balajadia You can achieve this with some custom scripts using the Swiper slider. Sharing working script. It might require a bit of adjustment as per needed.

<script>
  const swiper = new Swiper('.swiper', {
    loop: true,
    autoplay: {
      delay: 3000,
      disableOnInteraction: false,
    },
    on: {
      slideChange: function () {
        const videoSlideIndex = 4; 
        const currentIndex = this.realIndex;
        const video = document.getElementById('cd22556f-f3ab-dd4d-1938-ffeaa5c77a30-video');

        if (currentIndex === videoSlideIndex) {
          this.autoplay.stop(); 
          video.play(); 

          video.onended = () => {
            this.autoplay.start(); 
          };
        } else {
          video.pause(); 
          video.currentTime = 0; 
        }
      },
    },
  });
</script>

Working Demo Link: test
Read only Link: Webflow - SecureSphere

5

Sweet! I’ll try it first then will update here if it works on my end. Thank you!

6

@Jared_Balajadia
You can achieve this with some custom scripts or with webflow slider as well.
here you can see the example with images
https://inspiredadus.webflow.io/interiors/storage
example with images & Video & tab slider
https://inspiredadus.webflow.io/projects/pomona
Please let me know if you still need any help or code.

Thanks