Background Videos on a slider

Hello everyone, I need to design a slider with 5 videos (all the same length). So I put a background video into each slider. The problem is that the videos are auto-playing and looping.

How can I set the videos to start playing from the beginning only when the slide comes in the view? Currently, all video starts at the same time and if I go from the first to the second slide before the end of the video the slide two video is already playing.

Is there any solution to this problem? with triggers animations or custom code?

Unfortunately, I can’t share my website because it contains sensible data and the client doesn’t want me to share it but I can share a small video to show you how it looks.

https://www.loom.com/share/943f5b9ddaba473ea63b1d05942c8928

Thanks in advance.

1 Like

This is “complex” for the core slider component (Solution only by custom code + custom slider) - because this idea based on Slider events + video API (If slide 2 is active stop all videos and play video 2).

I can solve this for you as a freelancer mission (By swiper slider).
More freelancers her: https://experts.webflow.com/

Sorry, no way to explain “how to” by forum answer.

I made in the past codepen - this is ± the idea you need (In this example i use GSAP animation):

1 Like

Hello, Thank you for your message. How much would you charge for something like this? please feel free to send me an email to guido@artspydr.com

Thank you

Hello :wave:, is there someone who is SHARING it’s knowledge about how to make a background video slider like it should be in a community forum instead of selling?

For example: