Ultimate CMS Slider for Webflow

Get the cloneable for this project (affiliate link)

Timestamps

00:25 - Structure & style overview
01:08 - Building the structure
04:08 - Setting up the code
04:47 - Configuring settings
07:40 - Configuring breakpoints
08:15 - Slider controls code
09:22 - Styling swiper classes
12:18 - Component structure variations
13:33 - Multiple component types
14:02 - Attributes to customize component

Join my Webflow Wizards Community

Try Webflow using my affiliate link below.

[russellmceacharn]

You are my new favorite youtuber, your instructions were so clear and to the point. I don't even know javascript but i think I can pull this off with your tutorial and especially with your cloneable. time to watch more of your vids, keep em coming!

[chestevenson]

OMG I love this! I’ve been tearing my hair out trying to do sliders with the Webflow native slider, CMS, and Finsweet Attributes and it’s just not good. Fair bit of custom code here but much better control.

[sam-gremberger]

I don't understand why this isn't a default for the WF Sliders. You can't even display a collection in there.

As always, thank you so much tim. Without you I wouldn't have picked up Webflow!

[dereksiuau]

Tim Ricks you are the best! - You also got me into Webflow and I am very inspired by you. Love your work you are amazing - Will look to join your Patreon soon :)

[qjwzeit]

Thank you a lot for this. This is purely gold.

[HarshitAgrawalOfficial]

Your explanation make things super easy💥

[AndreMurrell]

Just when I thought I had a handle on Webflow this blows the lid off that! Great content. I have a lot to learn! sigh!

[sandraprunici]

Super useful! Thank you for this tutorial!

[seanokana]

Tim... I must say.... your content is astounding. I am so grateful for your heart to make this stuff free. You should try to find out how to enable Super Thanks on your videos so people can donate as patronage. Keep up the great work!

[greenfleshyflower]

This is awesome! I was wondering how you can make the text a hyperlink here for each individual title?

[jensv]

Hey Timothy, thanks for another great tutorial. How would you fix this lighthouse diagnostics "Does not use passive listeners to improve scrolling performance"? Is this possible?

[Bars_Sl]

we can keep slidesPerView: 'auto' and have slide gap, using slide paddings with calc(var(--gap)/2). And adding negative margins to .swiper-wrapper via calc(var(--gap)/-2).

[cannonleo]

Thank you very much, this was exactly what i was looking for, howver icopied the clonable div block from the project into mine, i can't find the custom code and it is not responsive, please kindly help. it would be helpful if the custom codes are easily avaliable so we can make changes to the classes and deploy

[jgustafe]

Thank you for this comprehensive tutorial. I learned a lot. Can anyone help me figure out why the color change that I added as a class to the "is-active" pagination dot (that lives on a darker background), is not being acknowledged on the live site? The class change is acknowledged in my build on webflow, and oddly enough, when the live site first loads, the color appears for a split second, but then defaults back to the core color that I'm using on other lighter backgrounds throughout the site.

[derekp]

I have a question. I’ve been wanting to make this slider with a hover animation, however, the duplicate slides do not take the hover animation of the true slides. Is there a way where I can transfer that hover animation to the duplicate/looped slides?

[sachinRao]

Hi Tim, as always great video, what library would you suggest splide or swiper? I recall you mentioned that splide has good documentation!

[beelacc]

I am trying to change the on-hover background color of the buttons but can't figure out where to change this. Can anyone point me in the right direction?

[jeffross]

This is just what I was looking for!

Do you know how you could have each of the images take on its own width (rather than each image being the same size)?

[the-secrettutorials]

Just wanted to support you with a comment 👍 Thanks a lot!

[AriaHarmony]

Thank you so much! I have a question, how did you get that JS embed link at 4:14? I'm so sick of having to save and publish the site to test slider changes every time, I tried codesandbox but I can't find a direct JS embed like yours.