How to make "slide" type repeater to slide automatically?

Ask the community
,
1

Question:
How to make “slide” type repeater to slide automatically ?
Here, I am not talking about Slideshow repeater. I am talking about a simple repeater whose display type is set to “slide”. In easy words, I want it to work like a carousel. It is a very very basic feature.

Product:
Wix Studio

What are you trying to achieve:
I want to make a automatically rotating slider repeater. I want to display multiple items at once and it should keep sliding and bring new items after a set of interval. More like a carousel.
I have attached a picture as well of how i wants it. You can ignore the centered item being little higher.

What have you already tried:
I have tried searching it in the wix studio studio, articles but didn’t found anything.

image
image740×452 22.7 KB

1 Like
2

commenting on here because i am looking for this same thing. the only way i can think of doing this is through the pro gallery, but i’m surprised there isn’t another quick solution or code i can find.

3

Hi, @mclarke !!

I had never properly tested this method myself before, so your question gave me a good opportunity to give it a try just now. The conclusion is that it is indeed possible. There may be an easier way than the method I tested, but for now, I’d like to share this approach with you. :relieved_face:

What you’ll need are a slideshow repeater and a flexbox. Both are standard elements available in the Wix Studio editor. First, place a slideshow repeater on the page. Then, delete all the default template elements inside it, as they won’t be necessary. Once it’s cleared, insert a flexbox element. For example, a flexbox with three boxes arranged horizontally would work well. You can add more boxes if you’d like. :raising_hands:

Next, place an image element inside each box. Resize the images to fit, then click the stretch button in the top-right corner of the image element so that it fills the box nicely. Repeat this process for each box. :upside_down_face:

Now, create a collection for the repeater. Let’s make four fields, all of them image type: background image, content image 1, content image 2, and content image 3. After creating the fields, add two sample items for testing, and assign images to them (you can choose from the Wix image library, for example). That completes the setup of the collection.

Finally, connect this collection data to the slideshow repeater using a dataset. In the editor, create a dataset for the collection you just made. Then, connect each element (the slideshow repeater’s background image and the three image elements inside the boxes) to the dataset fields. As the last step, go into the slideshow repeater’s settings in the editor and toggle on both Autoplay and Infinite Loop.

With that, you should be able to achieve exactly what you’re aiming for! :innocent: :raising_hands:

1 Like
4

hi! i will try using a flex box! but before I do, would that allow me to have more than one item in view at a time? My goal is to have 6 customer reviews automatically looping with three in view at a time, and sliding over by 1 a time. So like reviews #1, #2, #3 in view, automatically loop to #2, #3, #4, and so on and so forth

5

I think it’s possible. To be honest, I tend to reflexively add a Flexbox as a kind of foundation, but if it’s just about connecting some elements to a collection via a dataset, then Flexbox isn’t really necessary. That said, by putting Flexbox in place as a structural base, I expect it will help keep the layout neat and responsive later on. However, based on what I described earlier, after showing “#1, #2, #3,” it would move directly to “#4, #5, #6.” If that’s not the kind of movement you’re aiming for—and instead you want something more like a carousel that never stops and keeps rotating smoothly at a steady pace—then it would require a different approach. :innocent:

2 Likes
6

yeah i pretty much want a text carousel, not an image one. I can make it work with image of each review it just a pain and surprised there isn’t a simple code to turn repeater slider to automatically slide

7

but the #1,#2,#3 to #4,#5,#6 might be a good work around for now, ill definitely try the flexbox so thank you for the suggestion!

8

From now on, you can also try searching with the phrases “marquee” or “marquee scroll.” That might be closer to the image you have in mind. If what you want is a single line of text that scrolls infinitely, Wix Studio already has that built in. However, if you want a repeater to rotate continuously like a carousel, you can probably achieve it by linking two repeaters together and moving them at the same speed. There should be an animation option like “move” that you can apply to elements—if you set that as a loop animation, it should work. :innocent:

1 Like