Creating Horizontal Scroll for Repeater | Wix Studio
Vložit
- čas přidán 15. 12. 2023
- 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:
www.wix.com/marketplace/templ...
Live example:
iloveditorx.wixstudio.io/hori...
#wixstudio #horizontalScroll #nocode - Věda a technologie
Wow! Thank you, that was awesome!
Thank you!
Ohhhhh 😅! I have been working on the side scroll animation for three days solid. You just solved a few of my issues. THANK YOU!!! 🙏🙏🙏🙏🙏🙏🙏🙏💃💃💃💃💃💃🍾🍾🍾🍾🍾🍾
I'm happy to hear!
Its the pain of my life. I just cannot get the repeater or container to stay on the screen. ergh!
This is soooo good THANK YOU
Thank you!
Brilliant!
This was massive help! Thanks a lot :)
Amazing!
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
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
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.
You always make the best tutorials!
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.
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
Get your free template - I'd love it if you could leave your feedback:
www.wix.com/marketplace/template/67dfc292-0f06-4433-a839-092f1d69486e?entry=gallery_page
HOW IS THAT IT DOESN'T AUTOSAVE EACH TIME YOU MOVE SOMETHING? MINE WORKS PRETTY SLOW
Can you show us how you create the container in the beginning
Get your free template - I'd love it if you could leave your feedback:
www.wix.com/marketplace/template/67dfc292-0f06-4433-a839-092f1d69486e?entry=gallery_page
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?
Hey, 👋
This is great question!
Sure, you can make the empty repeater item height higher so the total empty repeater height will be bigger and because he is the animation trigger the animation will take more time to be completed.
Let me know if it's working for you
I try to found one method but for programming with code
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?
Get your free template - I'd love it if you could leave your feedback:
www.wix.com/marketplace/template/67dfc292-0f06-4433-a839-092f1d69486e?entry=gallery_page
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 :)
Hey,
Thank you very much for the kind words!
I checked again and did not find a problem with the live sample site.
Could it be that "Reduce Motion" is enabled on your computer?
If so, then animations will not work when "Reduce Motion" is on.
is there a video where you show how to create the container for repeater?
Get your free template - I'd love it if you could leave your feedback:
www.wix.com/marketplace/template/67dfc292-0f06-4433-a839-092f1d69486e?entry=gallery_page
After you move the blue repeater down 100vh your container sticks but mine does not, it just keeps scrolling. Tips?
Get your free template - I'd love it if you could leave your feedback:
www.wix.com/marketplace/template/67dfc292-0f06-4433-a839-092f1d69486e?entry=gallery_page
I tried it but the maximum distance is just 34% in the animation panel which is preventing the repeater from scrolling completely, do you know about any issues that might be causing this?
I've noticed. It seems like a bug. I hope it will be fix by Wix soon
how did you create the repeater at the beginning can you show it?
I showed at the beginning of the video
If you wanted each one of these items to link to a product page, how would you set that up?
You can connect both repeaters to the Store products database using dataset
amazing tutorial! you just forgot to connect the height section repeater to your database so it can adapt the number of elements!
How do I get to see all these controls you are working with? Where do I access this advanced mode? Thank you
Go to the editor menu > View > Sizing preference
@@Studio-Il Thank you for the quick reply - but I am not finding it - like I don't even see a "view" let alone Sizing preference option. My interface looks completely different than yours. What am I missing here?
@@serrasemi5337 Are you using the Wix Studio editor?
uhm yes I am now - thank you @@Studio-Il
@@Studio-Il uhm I am now switching to six from squarespace, it's all new.. Thank you!!!
Can I do this on Wix Editor?
Yes. On wix editor, just found it out myself, click on the circle button with the plus look button. O=+. From there, look for gallery. From gallery, look for slider gallery. You all set from there
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...
How it works in mobile version?
Same as Desktop just scaled down
Pants. I switched to Mobile and its totally different. Needs a rebuild for mobile.
I am creating a site and I need to be able to scroll horizontally like this. Do you have an email address that I can share my site with you?
Get your free template - I'd love it if you could leave your feedback:
www.wix.com/marketplace/template/67dfc292-0f06-4433-a839-092f1d69486e?entry=gallery_page
Still struggling with this the set up went on a tangent as you change some of the settings.
Surely Wix Studio has a simply way of creating this effect without needing all the settings. My biggest problem is getting the images to scroll across the page before they disappear. Then you add content and it changes the settings.
Could you possibly do a basic tutorial breaking each element down.
I'm going to keep trying but this seems so difficult to work in the real world.
Hey,
Would it help if I sent you a copy of the sample site I showed in the tutorial?
@@Studio-Il Is that the published site or the coded one. I've got a scroll animation I've got working from another video this one seemed much more complicated. I've seriously spent way too many hours trying to understand this and when I even look at the wix tutorials I actually don't think the experts understand it either.
@@Studio-Il Here is my published site. I'm working with general animations and effects. The most recent is the one at the bottom of the screen as you can see the pictures are scrolling off the screen and not sticking to the screen and rolling upwards.
I guess I'm trying to find a quick fix so it does not take hours upon hours to create this effect. But it does seem that you need different settings for every possible scenario. I'm going to try another tutorial now to see if I can get a better understanding.
@@KeithHepburn This tutorial is specifically designed for horizontal scrolling with Repeater. I suggested that I send you a copy of the editor itself (not the live version) so that you can examine how it is built or use it as is
Get your free template - I'd love it if you could leave your feedback:
www.wix.com/marketplace/template/67dfc292-0f06-4433-a839-092f1d69486e?entry=gallery_page