Hi! Watched through 4 or 5 different tutorials, couldn’t make anything and then found this. Watched your video one time, just one time and made my slider work. Everything is so clear. Thank you a lot!!!
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.
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.
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
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?
@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
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
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?
@@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!
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!
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
Yep! Technically each layer of a collection list is just a div. So just replace your collection list and list wrapper with divs, and manually add slides to your slider by duplicating divs as well! Could be nice to make the whole thing a component. Replace your list (direct parent of all slides) with a slot, so you cane easily add slide components
@@iljavaneck Thanks for the reply. tried the tutorial, you do an amazing job but you lost me with the external coding program. Don't know how i can open and connect this
I've tried so many times through other tutorials, but yours is the best one man. Thanks a lot for sharing this amazing video!
Hi! Watched through 4 or 5 different tutorials, couldn’t make anything and then found this. Watched your video one time, just one time and made my slider work. Everything is so clear. Thank you a lot!!!
I'm so glad to hear, glad it was helpful!!
big shout-out for pointing out that Finsweet custom code cookie I never noticed before. Huge time saver.
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.
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.
This is Super Helpful man. First Teaching The Basics and Then The Badass Thing.
Thanks! This just saved a lot of time researching and figuring out how to make it work
You are awesome! Please upload more videos.
Thank you! This was just what I was looking for! :)
Fantastic tutorial, love how easy you make it all look :D Thank you, Ilja 🔥
Thank you, that was really helpful !
AMAZING!! Thank you so much for explaining the responsive code too. Instant sub!!
Super well done, I plan on implementing this soon!
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!
Damn... now it really feels like it'll a piece of cake haha 👌💪
Much love
Can we have the horizontal scroll effect for the cms slider?
You mean using trackpad and/or horizontal mousewheel? Yes, Swiper's got an option for it: swiperjs.com/swiper-api#mousewheel-control
Fantastic explanation again!
Thank you, bro!
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
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
awesome video!
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
Nice and simple! 🔥🔥🔥
Nice job mate!
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 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 :(
Like it bro! Thanks!
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.
Good combo class tip 🤔
Thanks for this ✨✨
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.
Amazing dawg
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 :)
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!
@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
what was using swiper for?
Building customisable sliders! Its a great library.
Does it work without cm/s?
Yep! Technically each layer of a collection list is just a div. So just replace your collection list and list wrapper with divs, and manually add slides to your slider by duplicating divs as well!
Could be nice to make the whole thing a component. Replace your list (direct parent of all slides) with a slot, so you cane easily add slide components
@@iljavaneck Thanks for the reply. tried the tutorial, you do an amazing job but you lost me with the external coding program. Don't know how i can open and connect this
@@iljavaneck just saw the codesandbox tutorial on your channel :D Gonna watch this. Your amazing
@@iljavaneck Well I don't know what i do wrong but it doesnt work for me. I'll try again tomorrow
Thank you so much
I love this sss
🔥🔥🔥🔥🔥
Swiper slider at its purest form 🤌
@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