Creating a CMS-powered basic slider in Webflow using Swiper
ฝัง
- เผยแพร่เมื่อ 18 ก.ค. 2023
- [ Get the cloneable ]
webflow.com/made-in-webflow/w...
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 👇 ]
Swiper: swiperjs.com/
Finsweet Extension: chrome.google.com/webstore/de...
Codesandbox: codesandbox.io/
How I record my screen: www.screen.studio/
[ Do you speak Dutch? 🇳🇱 🇧🇪 ]
Join the largest and most vibrant no-code community!
www.nocodecommunity.nl/
[ My socials ✌️ ]
Twitter: / iljavaneck
Instagram: / by.ilja
Awwwards: www.awwwards.com/ilja-van-eck/
Webflow profile: webflow.com/@iljavaneck - แนวปฏิบัติและการใช้ชีวิต
![Ep.2 เบสไวน์ รวมคลิปฮา SS4 - [ พากย์นรก ]](http://i.ytimg.com/vi/Ihk-LzEbox0/mqdefault.jpg)
Thanks! This just saved a lot of time researching and figuring out how to make it work
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.
Fantastic tutorial, love how easy you make it all look :D Thank you, Ilja 🔥
big shout-out for pointing out that Finsweet custom code cookie I never noticed before. Huge time saver.
This is Super Helpful man. First Teaching The Basics and Then The Badass Thing.
Super well done, I plan on implementing this soon!
Nice and simple! 🔥🔥🔥
Fantastic explanation again!
Thank you! This was just what I was looking for! :)
Nice job mate!
awesome video!
AMAZING!! Thank you so much for explaining the responsive code too. Instant sub!!
Damn... now it really feels like it'll a piece of cake haha 👌💪
Like it bro! Thanks!
Thanks for this ✨✨
Amazing dawg
Good combo class tip 🤔
Great explanation! I come from a design background. And with your tutorials this sandbox-swiper-GSAP-thing is less intimidating. 💪
Ahh that's great to hear, appreciate your comment!
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 :(
Thank you so much
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
I ran into the same issue. I got it working after i replaced all the single quotation marks (') with double quotation marks (") in the "Initialize Swiper" code provided by the Swiper website.
I love this sss
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
🔥🔥🔥🔥🔥
how do you connect navigation to swiperjs? for me it shows basic ones, and shows only previous button
Sorry, it's not clear to me. At the end, what we need to do with the code we just created? You didn't say.
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?
I see pros like Timothy Ricks use this too. But it all looks very intimidating. Maybe one video suggestion would be a Webflow+Codesandbox101 Overview.
@@eli.alcaraz You can definitely achieve the same with just using the Webflow custom code section. The reason for Codesandbox is that you don't have to hit 'publish' in Webflow after every edit (and then wait for it to publish), But rather hit save in codesandbox, and immediately refresh your site to see the changes - this works much faster during the build process.
When done, you take the code from csb and paste it in Webflow (or host them somewhere else if you like).
I'll definitely create a short video soon that quickly covers how it works!
How do you create the codesandbox though. Which do you start with, react, vanilla, etc? That's where I'm stuck. @@iljavaneck
@@jgustafe check out the latest video on my channel! It goes through all of those steps.
This is dope Ilja!
Were you a developer before picking up webflow?
Thanks! Had some basic knowledge on HTML, CSS and some JS from university :)
@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!
To have a looping slider, I believe your total number of slides should be more than double the amount of slidesPerView. If this is not the case, the loop will probably behave in weird ways
Jumped to Codesandbox which for those who have never used before becomes too difficult to follow along. Looked good up until that point.
Sorry about that - will not take this for granted in following videos. I have a guide on how to setup a codesandbox on my channel now!
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.
glad you like it! Webflow allows you to visually manipulate HTML and CSS, so understanding that is key. I've heard good things about Flux Academy courses!
When you have the basics covered, you can get more and more advanced by diving into custom coded interactions and animations
loved the video! But I have a question, does the webflow site need to be published for the slider to work? And the codesandbox, is it just a vanilla javascript template?
did you find it out, same problem here.
@dianaatobe @shanmc777 Yes, the site has to be published for the slider to work. Custom JS doesn't work inside of the Webflow designer. And also yes, it's a vanillaJS template! You can check out my last video to learn more about how I use CodeSandbox
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... :(
Make sure you target the correct class names in your navigation parameter in Swiper, like I'm doing at around 11:50. If you have those set correctly, double check that there is no elements overlapping the buttons which prevent the user from clicking the buttons
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
hey! Glad it was helpful :) You would open up the page settings, and scroll to the bottom. There's a code section that is called 'before '.
Copy and paste the following:
// Paste your code below this line
And then paste the code on the empty line, between the tags!
@ilja Van Eck it does'nt work with my code ! Probably not plugged in correctly but don't know why ;(
this is a convoluted mess, holy hell
Swiper slider at its purest form 🤌