Creating a CMS-powered basic slider in Webflow using Swiper

[ Get the cloneable ]

After asking around on Twitter, a lot of people seem to struggle a bit with creating CMS-powered (basic) custom sliders in Webflow. So I'm making two videos on how to do so. In this first one, we'll cover a very basic setup for a looping team slider, with custom buttons. Tomorrow I'll post a video on a slightly more advanced but very cool image gallery with a parallax effect.

** Edit: realized that I forgot to talk about the sorting of the slider items after mentioning the number CMS field. You can do so by entering the CMS List settings in your settings panel, and sort the list by your number field. **

[ Links 👇 ]

[ Do you speak Dutch? 🇳🇱 🇧🇪 ]
Join the largest and most vibrant no-code community!

[ My socials ✌️ ]

[jamesmac]

That tidbit about changing the class name for the button elements is a lifesaver, was going crazy trying to figure out why they kept disappearing when I'd publish. What a weird quirk, thank you.

[duncanprince]

Fantastic tutorial, love how easy you make it all look :D Thank you, Ilja 🔥

[OSANDA_Design]

This is Super Helpful man. First Teaching The Basics and Then The Badass Thing.

[patrick_foley]

big shout-out for pointing out that Finsweet custom code cookie I never noticed before. Huge time saver.

[jansleyreal]

Super well done, I plan on implementing this soon!

[mariawungsung]

Thank you! This was just what I was looking for! :)

[kelly_browning]

AMAZING!! Thank you so much for explaining the responsive code too. Instant sub!!

[armansalehi]

Damn... now it really feels like it'll a piece of cake haha 👌💪

[foreva]

Great explanation! I come from a design background. And with your tutorials this sandbox-swiper-GSAP-thing is less intimidating. 💪

[garethellison]

Jumped to Codesandbox which for those who have never used before becomes too difficult to follow along. Looked good up until that point.

[weezyf]

i'd love to see a video showing how you're able to use code sandbox. i watched and followed along to your codesand box video, but you don't seem to cover how to get your webflow site to show up.

You mention you're using the FinSweet plug-in to add the code to the site settings - does that mean without the Finsweet plug-in you wouldn't add the code to the page, but rather site settings?

I've tried both to no avail, but I'm trying to understand what I'm doing wrong.

Thanks

[jverdin]

This was awesome! Do you have any tutorials on how to add a scroll bar and connect the buttons to the code? Didn't see them in your channel :(

[neha-gupta-smitch]

Amazing tutorial, love how you explained each bit so that I can customise the code myself. Just one question, how do I get this code on webflow. I see you used the sandbox, but is there a way to do this without the sandbox. i.e. where do I paste this code in webflow

[goldenant]

i just want to add a link block insider the slide to wrap everything, - however, doing so breaks the design. it's so frustrating when you want a div to do NOTHING, yet can'tseem to make that happen.
Also, if you didn't style the slides, such as making them 20rem and addingthe gaps, would that effect the final results? or did you just do that so the desing on the webflow canvas would match the live version

[sykowhite]

how do you connect navigation to swiperjs? for me it shows basic ones, and shows only previous button

[akinolaolayinka]

This is dope Ilja!
Were you a developer before picking up webflow?

[timallen]

@iljavaneck, After cloning to my site i run into an issue where the slider stops once i hit the last item. Any thoughts on a fix for that? Thanks!

[eli.alcaraz]

This was super helpful. Hit like! Thank you.

Question - what is codesandbox? What do you use it in conjunction with Webflow? Can achieve the same effect without using it?

[thomasboury]

Is there something special with the arrows that you didn't mention? I try to create some links block with icon inside, with the "swiper-btn-prev" class on them. But nothing happens when I click on them... :(

[dickyafisena]

This is awesome turtorial for me!

I'am a UI designer and new in webflow, and want to become expert like what you did, so i want to ask.. how to become an expert webflow? whats programing language should i learn to make like what you did in ur instagram works. Thank you.