I've attempted to make a carousel like this six different times following other tutorials and was getting nowhere. It finally worked following this tutorial THANK YOU! and subscribed!!
This is a brilliant tutorial, Tim! It's easy to follow, you zoomed on the code to make it easier to read, and other well-done and well thought stuff! Thank you!
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.
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!
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!
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!
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).
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 :)
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.
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 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
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?
Tim, great tutorial. I've noticed that the swiper bullets look weird on mobile devices after I followed your tutorial, but when I opened your webflow cloneable on the mobile device also your bullets are deformed. Did you maybe notice this and know why that happens? I'm talking about the slider-main. In Chrome Dev View you won't be able to see the deformed bullets, but if you actually open it on a mobile device you will notice what I mean...
Thank you so much Timothy, your video is amazing, as all your videos! This video is the best for the base understanding for swiper and to make perfect looking swipers. But i just had one issue (i use slater instead of codesandbox since it does not work anymore) the pagination dots are perfectly round and in shape when loading the page but directly after loading they change to "egg"-shaped (oval) and no matter what i do, i change settings in Webflow OR in the console while writing javascript, its just not changing. Thank you so much maybe you can help me with this one.
Timothy, when using custom sliders, how do you go to the next slide while in editor mode? like if a client is editing a page with a slider and wants to edit another slide
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?
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
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
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
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?
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)?
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
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?
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?
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.
@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
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?
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!
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.
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?
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.
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?
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)
@@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.
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!!!
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
![The ULTIMATE SwiperJS Guide [2024 Webflow]](http://i.ytimg.com/vi/wYNo99uf7CM/mqdefault.jpg)
I've attempted to make a carousel like this six different times following other tutorials and was getting nowhere. It finally worked following this tutorial THANK YOU! and subscribed!!
This is a brilliant tutorial, Tim! It's easy to follow, you zoomed on the code to make it easier to read, and other well-done and well thought stuff! Thank you!
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.
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!
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!
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!
Thanks so much, Sean!!
Incredible explanation, you did a great job on this tutorial
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).
Your explanation make things super easy💥
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 :)
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.
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.
samee, did you figure it out?
@@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
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!
Thank you again web bro!
Thank you a lot for this. This is purely gold.
Hi Timothy! Thanks for your videos! Can I use this to build a slider without CMS?
Extremely helpful! Thank you
Super useful! Thank you for this tutorial!
So glad it helps!
Thank you Tim!
amazing tutorial!
Wow, this was super helpful!
Thank you for the tutorial! This this work with CMS items only?
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.
@@timothyricks ok, thank you!
The best. Thx man :)
How do we link codesandbox to our slider?
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?
Very awesome tutorial! Thank you! 🙌
Too good! How would we get autoScroll on this, so they're slowly moving?
Tim, great tutorial. I've noticed that the swiper bullets look weird on mobile devices after I followed your tutorial, but when I opened your webflow cloneable on the mobile device also your bullets are deformed. Did you maybe notice this and know why that happens? I'm talking about the slider-main. In Chrome Dev View you won't be able to see the deformed bullets, but if you actually open it on a mobile device you will notice what I mean...
Thank you so much Timothy, your video is amazing, as all your videos! This video is the best for the base understanding for swiper and to make perfect looking swipers.
But i just had one issue (i use slater instead of codesandbox since it does not work anymore) the pagination dots are perfectly round and in shape when loading the page but directly after loading they change to "egg"-shaped (oval) and no matter what i do, i change settings in Webflow OR in the console while writing javascript, its just not changing. Thank you so much maybe you can help me with this one.
Only seeing the clonable for the (Advanced swiper Slider) video and not this version (Ultimate CMS Slider)? How do i get the this clonable?
Just wanted to support you with a comment 👍 Thanks a lot!
So great. Thank you again!
Any reason why copy and paste-ing from your clone-able site to my custom one wouldn't work?
Copying cms items doesn’t work well
Timothy, when using custom sliders, how do you go to the next slide while in editor mode? like if a client is editing a page with a slider and wants to edit another slide
Thank you SO SO much🙏🙏
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?
did you figure it out? I'm having the same problem
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
Hello! I built this without CMS for a gallery images but how can I implement an image zoom on click? Thank you very much!
Can you make a video on how to have automate slider. A horizontal slider, with mockups auto sliding
Thanks!
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
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
Nice can we have a progress bar that grow when we scroll
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?
It’s the same link for both. This slider is on the second page. There’s a couple sliders in that project.
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)?
Width = auto
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
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?
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?
hey Tim! thanks for this, any idea why on mobile the pagination dots do not retain the same styling and almost look stretched?
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.
Yeah strangely the dots are squished only on iOS Safari, as far as I can tell (fine in Chrome dev tools, find on Android)
@@nicholasryanhoward667 @Legacy Design Agency - this happened to me too. Did anyone figure it out?
Has anybody found a solution for this?
@@brewyth I did not and couldn't find it documented anywhere else, so I ended up going with a different slider solution for now.
@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
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?
This is awesome! I was wondering how you can make the text a hyperlink here for each individual title?
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!
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.
Hi Noel, Slater.app is a good replacement and made specifically for Webflow
@@timothyricks As always, thank you so much for all your help on TH-cam.
Hey im changing the breakpoints from 3 to 1 and suddenly the whole page is blanl except 1 blurry image across the whole page
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?
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.
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?
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.
That worked perfectly! Thanks!!@@timothyricks
Hey Timothy! Any chance you can upload the original (this version) as a cloneable instead of just part 2?! 🙏
It’s on the second page in the cloneable. There’s a couple sliders in that project to choose from
@@timothyricks how did I miss that 😆 thanks so much for everything you do! ❤️
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.
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)
@@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.
Hi Tim, as always great video, what library would you suggest splide or swiper? I recall you mentioned that splide has good documentation!
Thanks Sachin! Both are solid options. I've switched to Swiper for all of my new projects because it has more features.
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!!!
Hi mate, did you manage to figure this out? I've tried many sliders now and they all give me the same issue. Cheers
@@james8356 Unfortunately I didn't.
Finally 😢
Are you sold on this over Splide these days?
Yes, swiper just has a lot more features
@@timothyricks rad! I'm on it! Thanks man!
None of this worked for me, copied the codes from the cloneable and still it’s not swiping
Didn't work for me. Gutted. :( looks really cool! For some reason when page loads the slides and slider expands to nothing! 😪
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
Te amo hijo de perra, no sabia que existian cms para sliders GRACIAS!