Ultimate CMS Slider for Webflow

In this tutorial, we'll learn how to completely customize Swiper.js sliders for the Webflow CMS.
Get the cloneable for this project (affiliate link)
webflow.grsm.io/swiper
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
/ timothyricks
Try Webflow using my affiliate link below.
webflow.grsm.io/4840096

[@russellmceacharn7750]

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!

[@chestevenson8358]

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.

[@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 :)

[@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!

[@HarshitAgrawalOfficial]

Your explanation make things super easy💥

[@user-qj6wz9ei6t]

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

[@shaun77r]

Very awesome tutorial! Thank you! 🙌

[@faifad]

Extremely helpful! Thank you

[@thewebart]

Thank you Tim!

[@sandraprunici9025]

Super useful! Thank you for this tutorial!

[@timothyricks]

So glad it helps!

[@amansharma4601]

amazing tutorial!

[@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!

[@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!

[@timothyricks]

Thanks so much, Sean!!

[@adityauiuxdev]

Wow, this was super helpful!

[@jkuehn2001]

So great. Thank you again!

[@tethron.]

Thank you again web bro!

[@jensv8859]

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?

[@joergfrank]

The best. Thx man :)

[@greenfleshyflower]

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

[@sachinRao15]

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

[@timothyricks]

Thanks Sachin! Both are solid options. I've switched to Swiper for all of my new projects because it has more features.

[@derekp1]

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?

[@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.

[@user-iq8kq7jp7u]

Hi Tim great tutorial as always!. I am trying to get all slides the same height regardless of content. At present I have varying amounts of content and some slides are taller than others. What would I add to the jQuery code to make them all the same height at all times? Thank you kindly

[@user-mr8ng9er1k]

Thank you SO SO much🙏🙏

[@jeffross7847]

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)?

[@youkba]

Width = auto

[@lodeluyckx]

Thanks!

[@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).

[@_pausinh]

Hi Timothy! Thanks for your videos! Can I use this to build a slider without CMS?

[@farhan-app]

Gold.😊

[@ianalmeida4759]

Just wondering.. after having implemented the scroll, my mobile version of the website has a horizontal scroll. I've tried trouble shooting and fixing the problem but never got to the bottom of it. Any suggestions and directions would be appreciated, Thanks

[@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.

[@jgustafe]

Any luck on figuring this out? Apparently this is a question that has been asked a few time times, but never answered. I'm still looking for an answer. Hope you found one.

[@dianaatobe7995]

samee, did you figure it out?

[@SnowBroder_Andrew]

@@dianaatobe7995 Have same problem. Still can't work with codesandbox but there is another option. Just go by webflow clone link in description below video ( Timothy have left it there ) then push "open in webflow" button, go to the page settings of Slider Main and just copy the code and then paste it in your project. It worked out for me. All you need is build your slider with the same class names

[@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?

[@leboselao5720]

Only seeing the clonable for the (Advanced swiper Slider) video and not this version (Ultimate CMS Slider)? How do i get the this clonable?

[@the-secrettutorials]

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

[@anthonyakubukwe4628]

Can you make a video on how to have automate slider. A horizontal slider, with mockups auto sliding

[@andreasbjoernmadsen]

The cloneable link is for the slider shown in the last few seconds of the video. Is there not a cloneable project (or view in Webflow) for the one in this video?

[@timothyricks]

It’s the same link for both. This slider is on the second page. There’s a couple sliders in that project.

[@hnoldin]

@timothyricks Love your videos man! I followed your guide, had it all working and suddenly the pagination and drag bar stopped working, would you be able help me debug. The slider it self works it just wont populate the dots

[@templa946]

Hi Timothy, desperately trying to this with a main slider that has embedded sliders in each slide. Whatever I do I cant get the pagination to work. Is it it possible, do you know? looked for tutorials everywhere but no luck....Help!

[@juanstephan9006]

Nice can we have a progress bar that grow when we scroll

[@daniel.s710]

Thank you for the tutorial! This this work with CMS items only?

[@timothyricks]

Glad this helps! This works without a CMS also. You'd just need to recreate the collection wrapper, list, and items with static divs instead.

[@daniel.s710]

@@timothyricks ok, thank you!

[@user-me4wd4ut4y]

Currently working on a project using swiper.js! However I only want the slider to be active on landscape and above. I have written all the code for the slider to only activate when screen size is 480px or higher. But when a user resizes the window to smaller (say they tilt their phone from landscape to vertical) I want to run swiper.destroy();. but for some reason it comes back as swiper.destroy is not a function. I have made sure this code only runs if swiper is not "undefined". But still to no avail. Do you know how I could get the destroy function to work?

[@roxibd]

Hello! I built this without CMS for a gallery images but how can I implement an image zoom on click? Thank you very much!

[@MartinBosy]

Hi Tim! I would like to ask you - I have an element inside of the slider that I gave a fixed position (so it's relative to the body), but on a published site, it is somehow positioned/wrapped inside of the slider. (in webflow designer all works great - i.e. relative to body, fixed position in the viewport). By any chance - do you have a suggestion how to fix it? Thank you!!!

[@james8356]

Hi mate, did you manage to figure this out? I've tried many sliders now and they all give me the same issue. Cheers

[@MartinBosy]

@@james8356 Unfortunately I didn't.

[@joshuayu9121]

anyone else having difficulties with the slider buttons? am I supposed to do anything in the settings besides the custom code to get the buttons to activate the slider? whenever i click the buttons nothing happens, but i see that i have slides in my cms

[@legacydesignagency]

hey Tim! thanks for this, any idea why on mobile the pagination dots do not retain the same styling and almost look stretched?

[@timothyricks]

Sure thing! They’re button elements so they may have some default padding or styling on mobile either from being buttons or from swiper itself. Those styles can usually be found in the inspector.

[@nicholasryanhoward667]

Yeah strangely the dots are squished only on iOS Safari, as far as I can tell (fine in Chrome dev tools, find on Android)

[@magic_miles]

@@nicholasryanhoward667 @Legacy Design Agency - this happened to me too. Did anyone figure it out?

[@brewyth]

Has anybody found a solution for this?

[@magic_miles]

@@brewyth I did not and couldn't find it documented anywhere else, so I ended up going with a different slider solution for now.

[@siddhartsonowal7116]

I add loop : true but when i click a photo it slide right to left to middle but the next photo was not showing when I add autoplay the next photo is appeared in middle an so on

[@neilmagadzia]

Hey Timothy! Any chance you can upload the original (this version) as a cloneable instead of just part 2?! 🙏

[@timothyricks]

It’s on the second page in the cloneable. There’s a couple sliders in that project to choose from

[@neilmagadzia]

@@timothyricks how did I miss that 😆 thanks so much for everything you do! ❤️

[@nickdemore1697]

Any reason why copy and paste-ing from your clone-able site to my custom one wouldn't work?

[@davidkathrein9644]

Copying cms items doesn’t work well

[@phillipinge3004]

I'm a noob and I've been trying to get this to work for hours. I have the structure set up correctly, but I can't seem to get the js from codesandbox to link correctly. I can tell because I am not getting the scroll behavior, and no matter what I change in the js (for instance space between) it is not reflected in the webflow design. Can anyone help?

[@dianaatobe7995]

did you figure it out? I'm having the same problem

[@aaezekiel]

Finally 😢

[@NoelBraganza]

Hey Timothy, I noticed that codesandbox has changed its subscription options and now you can't really access any thing on the sandbox publicly. Do you know if there's any other similar tool where we can edit and deploy code in a similar way as it did? Setting up VSCode environments and local hosting is a bit complicated for me to get that going.

[@timothyricks]

Hi Noel, Slater.app is a good replacement and made specifically for Webflow

[@NoelBraganza]

@@timothyricks As always, thank you so much for all your help on KZbin.

[@julianwitzel6234]

For some reason, my slides are super huge for no reason. I followed your tutorial several times already but this time a slide not 33.33% like set it to, instead it is 5.5924e+06px. Do you have an idea how that happens?

[@mackster0601]

hey man, I guess this is my first ever YT comment and I'm not sure if you read it. But I had the same problem, but as soon as I switched the slidesPerView from "auto" to 3 it worked super well. In the video you also see how to overwrite for different breakpoints.

[@sam-45632]

Hey im changing the breakpoints from 3 to 1 and suddenly the whole page is blanl except 1 blurry image across the whole page

[@aryzedesign]

Hi Timothy, this is a great tutorial, but I'm finding that the pagination dots are never fully circle on mobile. I tried to publish my site many times and even published your cloneable, and the same issue is occurring. Do you know why the pagination dots aren't circular?

[@timothyricks]

I think it has something to do with the way button elements are rendered on IOS. Try switching where it says “button” in the code to “div” instead.

[@aryzedesign]

That worked perfectly! Thanks!!@@timothyricks

[@fndrsm]

Like your tutorial, but cant use it because im on free account that cannot do custom code. Hope webflow will make limited custom code free in the future

[@seanokana]

I wish there was an easier way to display a slider for multi-images in each collection item.... seems like that is really hard to set up.

[@timothyricks]

This should work for multi-image items also. The main item would be the component, and the slider classes would go on the multi-image wrapper (swiper), list (swiper-wrapper) and item (swiper-slide)

[@seanokana]

​@@timothyricks ah yea... i think I got mixed up--I've been trying to add a lightbox (slider) to the bottom of each item if the post has multiple images, but there is never an option to pull multi-image items in the lightbox component.

[@nicholasryanhoward667]

Are you sold on this over Splide these days?

[@timothyricks]

Yes, swiper just has a lot more features

[@nicholasryanhoward667]

@@timothyricks rad! I'm on it! Thanks man!

[@WanderingTechie]

None of this worked for me, copied the codes from the cloneable and still it’s not swiping

[@garethellison01]

Didn't work for me. Gutted. :( looks really cool! For some reason when page loads the slides and slider expands to nothing! 😪

[@Djoako22]

Te amo hijo de perra, no sabia que existian cms para sliders GRACIAS!