Sliders with a Dynamic collection list in Webflow - Tutorial

I used this carousel: kenwheeler.github.io/slick/
Join the Pixel Geek Community:
pixelgeek.community
Want to support my content? Consider donating here:
www.buymeacoffee.com/pixelgeek
I've been a web designer since 1995 and I've learned a lot about this industry. Now that I've found my dream job at Webflow, I want to share some of my experiences and knowledge with you in hopes you can find your dream job as well.
The purpose for this channel is to help you design and build better websites, learn more about the business of web design, and empower you to inspire others in this unique creative industry.
-------
Like what you see? Subscribe here:
kzbin.info_...
-------
/ thepixelgeek
/ pxlgk
pixelgeek.co

[@aleexious2466]

Your tutorial is the last one anybody needed!

[@louisverschooris7989]

Great value ! Love it! 💪

[@brandonmosco8365]

Nelson, u constantly surprise me!! Yay!!

[@pixelgeek]

😁🙇🏽‍♂️

[@nicolasmarquez5956]

Seems nice!

[@abhishek198]

How can i change the position of the prev/next buttons? Instead of top & bottom, i wanted to show it left and right of the slider, the way native webflow slider works

[@carolloiola_]

Anyone knows how to do this with a multiple column slider inside of a tab?

[@baonguyen7013]

Can you create center mode with 2 item center, please help me!

[@jadeelliott-neilson4559]

Hi, I'm after multiple CMS items per slide? is this possible?

[@nicolas.mellado]

Thanks bro

[@pixelgeek]

happy to help :)

[@arunachalammurugesan8418]

how to make it responsive?

[@janssenlee]

Hi! I'm struggling to reposition the arrows, currently there is one above and one below (just like in your example), but I'd like to move them so that they are positioned under the slider, with the previous and next arrows next to each other. I'm guessing I need to use the appendArrows? But I just cant figure out how to do it! Hope you can help :-)

[@pixelgeek]

yea thats the tough part. Fully customizing the look and position of the elements gets really tricky. 😬

[@christopherklaich55]

Yes, I got it figured out. When you style to buttons like he describes you also have to classify them where you want them with Absolute with the position you want. it can take some figuring out to get it placed just where you want it. if you have more questions let me know.

[@user-ju1fm5dj7x]

I'm happy! It's just the magic of JS! Everything works. I've set up auto-play, but now I need to hide the buttons. How do I hide the buttons?

[@user-ju1fm5dj7x]

arrows: false ?

[@1060music]

Still didn't figure out how to make the arrows align next to eachother centered and underneath the image. Any leads for me?

[@christopherklaich55]

Yes, I got it figured out. When you style to buttons like he describes you also have to classify them where you want them with Absolute with the position you want. it can take some figuring out to get it placed just where you want it. if you have more questions let me know.

[@nielsdercksen9659]

It's a shame we still need workarounds for this.. Although this is a nice example, I do think the finsweet slider is cleaner, as it uses the native webflow slider component, and you can css-hide the collection list, to keep the designer view nice and clean. Either way, thanks for this example! The more options we have before they finally build this natively the better!

[@TheKetoSurvivor]

But it seems you can only make one slide not multiple in view.

[@kyleHunter1986]

@@TheKetoSurvivor You've probably found by now you can show multiple slides using flex on the native slider. If not set it to flex and using overflow visible you can get the effect.

[@sorianosoul]

Nice

[@pixelgeek]

Thanks

[@TheEminant]

HI, I am totally new to webdeveloping and webflow, you have proven yourself to be the best teacher I have ever met. I am designing websites now, and the credit goes to you. I have built this slider following your instructions. But now i encountered a problem, the slides stop playing auto once we click on the slide, previous or next button. Is there a way even after clicking the slides keep playing automatically? please help me

[@eyewearrepublic9820]

Have slick sliders slowed your website down to the point where it hurts with Google SEO?

[@pixelgeek]

Good question. I don't this it does. Lots of websites use this plugin. Here is an example of a client page I used it with qualified.com/plus

[@eyewearrepublic9820]

@@pixelgeek thank you

[@realtyrocker]

Does this have the ability to open images into a lightbox? It's amazing that Webflow doesn't have such basic functionality that I can code with HTML. Defeats the purpose of the CMS.

[@newhottrend4059]

we need same this Tutorial its better from long videos like livestream

[@christopherklaich55]

I just tried this...and it would not work. Not sure why. :(

[@1060music]

Had the same thing, and was convinced the code was inserted right.. However, upon double recheck I had added two brackets somewhere, go figure why, and it worked!. So: maybe start from scractch?

[@christopherklaich55]

@@1060music Thanks, I came up with a different solution, but I'll keep this in mind for future use! Maybe I'll go back and try it again. I had double-checked and started over again several times. I'll check the brackets though, thank you!

[@StefanKRV]

I am experiencing the same issue as you. Started multiple times form scratch, but no result :(

[@StefanKRV]

@christopher I kept writing the name of the class with capital letters (Section-Testimonials__Slider), but instead it should be written in small letters only (section-testimonials__slider). This solved it for me.

[@christopherklaich55]

@@StefanKRV Thanks, I'll have to see if that was my issue!