Im trying to create the same type slider portfolio used on the below two websites. I want people to be able to fluidly scroll right or left to see images. Looks like its just one long slide?
Ive looked up dynamic sliders and horizontal scrolling but I cant seem to figure out which one gives me these results. If someone can point me in the right direction I’d be grateful!
Hey @deanne107, are you looking for something like this cloneable?
This works with Slick. You are going to need to be able to add and edit a little bit of custom code for this to work. The documentation is quite good and I didn’t have any issues implementing this myself. (The accessible alternative is Accessible Slick).
YES! Your clone is exactly what Im looking for, thank you! I added it to my site but its not actually scrolling. Its just photos going down the page. Am I missing something?
That’s great! Slick is an external library being referenced in the custom code. You are going to have to publish your site for it to work as seen in the cloneable. Try it out and let me know, if everything works for you.
Unfortunately, I tried publishing but its still not working…
https://www.danielleanddeanne.com/photography
I can’t find the required code on your published site. Please make sure to past the custom code from the cloneable into your own project. You can follow along in the video below.
PERFECT, it’s working now! As you can tell Im new to this (or to code particularly) so I really appreciate the video! Can I bother you for two more questions?
Am I able to easily change it so everything is always showing without the shading?
If I wanted to add a div box with left and right arrows as another option of moving the carousel, is that code I need to enter or maybe a trigger?
Again thanks!
That’s great to hear. Sure, no problem at all.
- Am I able to easily change it so everything is always showing without the shading?
Try increasing the opacity of the class Image Wrapper back to 100%. That should do it.
It is possible. I will check in one of my own projects and get back to you on this.
Thanks that did the trick for the opacity!!
@deanne107, following up on your second question.
Add the following to your custom code section:
prevArrow: $('.prev'),
nextArrow: $('.next')
Add two divs with the corresponding classes .prev and .next. (You can name these whatever you like, just remember to update the classes in the script.)
This will allow you to move the carousel left and right.
Read-Only
https://preview.webflow.com/preview/slick-slider-cloneable?utm_medium=preview_link&utm_source=designer&utm_content=slick-slider-cloneable&preview=edb64acf75501422c56074c818e4d02f&workflow=preview
Published site
https://slick-slider-cloneable.webflow.io/
Let me know if you can get it working.
That worked perfect! Seriously thank you so much, you’re amazing!