Creating Horizontal Scroll for Repeater | Wix Studio

Welcome to this Wix Studio tutorial!
In this step-by-step guide, we'll explore the seamless process of adding a horizontal scroll effect to your website using the powerful Repeater component.
Learn how to dynamically display content and make it scroll horizontally without writing a single line of code, making your website design both visually appealing and user-friendly.

Get your free template - I'd love it if you could leave your feedback:

Live example:

#wixstudio #horizontalScroll #nocode

[the_andievillar]

You're amazing man. Thanks for all the help. Was able to get some really cool designs added to my site because of a few of your videos. Been watching them for about 4 hours here from Miami! Keep up the awesome work. I appreciate you. 🙏

[LukeBone]

Why did you skip over designing the container? Great content but a very long video considering parts were missed. You skip so fast over so many vital parts when resizing...

[TiffanyT-LaDolceVita]

😅! I have been working on the side scroll animation for three days solid. You just solved a few of my issues. THANK YOU!!! 🙏🙏🙏🙏🙏🙏🙏🙏💃💃💃💃💃💃🍾🍾🍾🍾🍾🍾

[sarthakdogra]

This was massive help! Thanks a lot :) <3
PS: I linked the Fade effect on the Title Section with the same side repeater. Worked perfectly

[rafaelcasaulta]

Thank you very much for your tutorial! Helped me a lot to smooth out the element.

I used it for a project-repeater, each element is 100vw and 100vh in size and the element contains a container with 40% width. it starts with a blank page (100vw padding) and ends with a blank page (also 100vw padding). The trigger is linked to the same database, so it has the same hight as the width of the repeater, and it has a padding of 100vw on top and bottom.

But it still didn't work that good over all the breakpoints. I got one for large desktops (1920+), one for desktops (down to 1050), pad (down to 750) and mobile.
On 1536 x 864 it works very well, on 1920 x 1080 it has a little too much space left and on 1440 x 900 it does'nt get out of screenview. (if I change some parameters it'll be a bit better, but in all it has a difficulty with resizing with the different proportions of the different screen sizes). When it comes to vertical layouts (tablet and mobile) it struggles even more.

Do you have any suggestion what i could change to make it work?

kind regards

[poledanceacademymalta]

Can you show us how you create the container in the beginning

[Weform-vy]

love this! how would the scroll animation work with the current wix studio (only in/ out setting) - works perfectly for me until then, but it doesnt start the scroll the way it does in your tutorial... would love your input!

[AlinBahoWixPartner]

You did an outstanding job on this. Your example Live* isn't scrolling to the right, fix so I can share this example with others. Well done sir :)

[edilsoncampos]

Great, you are back... can you make a video to show how text effect in order to invert. Same effect that for your video about the cursor.
Thank you so much

[kennygo]

a question plz. one thing i am strugling with Wix Studio so much since moved from wix. that is there is no way to edit separated design on slideshow container. because Wix studio only has the slideshow repeater which results all the same design on every slides. I searched there is flexbox in Wix studio but it seems that it doesn't have the automatic slideshow without clicking arrow button to swip the slide. Do you have any solution for this simple requirement that was existed in Wix / Editor X? why it cannot be implememted in the advanced Wix studio

[kyuya]

is there a video where you show how to create the container for repeater?

[danjia]

Can I have more than 3 repeaters horizontally aligned on the desktop site? I've tried but the repeaters gets a different width and the 4th one gets cut for slide effect.

[factorygraphics]

Is it possible to do this at only 2/3 of the view port height and have the sections above and below be partly visable in the view port?

Ive been messing around with this tutorial, but struggling to achive what im after.

[MadhavSampat]

Hey, appreciate your efforts. I'm struggling at the very beginning. Unable to add a container to an item in the repeater, for some reason. Can you please help me out with this? Or an alternative solution?

[iamrelient]

After you move the blue repeater down 100vh your container sticks but mine does not, it just keeps scrolling. Tips?

[MarceauWambergue]

amazing tutorial! you just forgot to connect the height section repeater to your database so it can adapt the number of elements!

[serrasemi]

If you wanted each one of these items to link to a product page, how would you set that up?

[serrasemi]

How do I get to see all these controls you are working with? Where do I access this advanced mode? Thank you

[KushalMamoowala]

I have a question. If the number of items in the repeater that is scrolling horizontally becomes larger, Say there are 12 items, then it will scroll too fast. Can we automatically adjust the height of the vertical (blue) repeater that is triggering the animation so that the scroll speed remains the same?

[kareduff]

HOW IS THAT IT DOESN'T AUTOSAVE EACH TIME YOU MOVE SOMETHING? MINE WORKS PRETTY SLOW