Multi Video slider with left right arrows

Question:
Hi there. In Wix Studio,I want to create a simple video slider - (mobile phone shot so portrait format) to house 3 videos. This needs to have left right arrows either side of video player to scroll further two videos, and ideally three dots underneath to show the current video. It’s a basic feature but I can’t seem to find a way to achieve this. There only seems to be static image repeaters not video. Surely this is possible?! The video player itself to cover around 20vw.

Product:
Wix Studio
What are you trying to achieve:

What have you already tried:
Image repeaters

Additional information:

Hi, Alex_Tuppen !!

It seems that the video box element doesn’t work, but I think you can add the video player element to a repeater. It might be clearer if you try adding it to a blank repeater element instead of using one of Wix’s preset repeater designs. In your case, I think it would be better to use a slideshow repeater instead of a regular repeater. :wink:

You can Try Wix Gallery, Video Library, and my favorite, the Multi State Box(this will need some coding)

Thanks for your quick reply! does this have the left/right arrow or button function rather than the standard unstyled scroll?

Hi, Alex_Tuppen !!

If you set up a slideshow repeater, you’ll notice that it comes with navigation buttons. Within this slideshow repeater, you can add a flexbox that displays three items. Then, embed video players into each box within the flexbox, and click the stretch button on each video player. This will create a solid framework for a video slideshow. Once you’ve built the framework following these steps, select each video player and change the video via the “Change Video” option. This way, you can set each video to be different. I think it’s worth trying, so I encourage you to give it a shot! :wink: :raised_hands:

Hi there, thanks so much for your help. I used the square slideshow repeater with the left/right arrow icons. Deleted the original items, then added the video players x3 within this. The navigation worked between the 3x videos but when these were played, the audio from the previous video kept playing over the current video that was playing.

Why in Wix is this such a difficult thing to achieve? I’ve used different builders in the past and this a standard core feature that can be achieved in seconds?

The issue is likely due to the fact that multiple videos can be played simultaneously by design. In other words, when the first video is playing and you click the play button for the second video, the first video does not stop and continues playing. This behavior is not a bug but rather a specification of Wix Studio. However, it may not align with the behavior you are trying to achieve in this case. :upside_down_face:

I initially thought this issue could be addressed with Velo code, but due to the characteristics of the Slideshow element, it seems impossible to control. Therefore, I have decided to abandon the implementation using the Slideshow element. Instead, I suggest using the Wix Pro Gallery. While the variety of customizations may be limited, based on my testing, this is by far the simplest and most effective way to create a video slider in Wix for cases like this. :smiley:

The steps are very straightforward:

  1. First, add a Wix Pro Gallery to your editor.
  2. Select all the preset media (images) within the Pro Gallery and delete them.
  3. Add your videos one by one to the gallery.

Once you’ve finished adding your videos, open the Pro Gallery settings and select “Slider” from the “Layout” options. That’s it—the setup is complete. With this method, you won’t encounter the issue of audio from the previous video continuing to play, so you can rest assured.

Now, feel free to customize and enjoy your gallery! :wink: :+1:

Brilliant - thanks for taking the time to provide a solution for this. VERY happy! :joy: :raised_hands: :raised_hands: :raised_hands: :raised_hands: :raised_hands:

1 Like

By answering your questions, I feel like I’ve gotten one step closer to mastering Wix Studio! Thank you! I’ll definitely use this experience as a valuable reference when I tackle something similar in the future !!! :raised_hands: :raised_hands: :raised_hands: :raised_hands: :raised_hands:

P.S.

However, this case made me wonder if video players placed inside a slideshow might not be controllable with .stop() or .pause(). I’d like other forum members to test this as well. :thinking: :upside_down_face: :melting_face: