I was becoming crazy looking for a tutorial to do that till I found yours. Great job, your tutorial is the best explained, simple and straightforward!!
@NikolaiBain3 жыл бұрын
Thanks Carmen, glad you found it helpful! 😁
@해피뉴이어-j8i7 ай бұрын
This was my big headache and I solved it easily thanks to you. Thank you so much. I think your video is the best CMS SLIDER video. I have followed a lot of things, but it failed because it was complicated, didn't understand, or didn't work. Your video is very intuitive, easy to follow, and works well. Thank you so much!!!!
@mathias62352 жыл бұрын
this is the most impressive thing ive ever seen in my life
@NikolaiBain2 жыл бұрын
Hey what a compliment 😏
@marianamarini3 ай бұрын
OMG I was looking for this for so long... I wanted something simple and easy, and this fits the bill. Thank you!!!
@ivanbadia32322 жыл бұрын
I'm never using Webflow's slider again. Your slider is the best any use case. Thank you.
@utsavkataria96 Жыл бұрын
Hey Nikolai, quick question - how to the navigation buttons know what they are supposed to do when clicked? Is it because of the custom code that we have inserted ? Thanks for the amazing tutorial!
@grantemerson5932 Жыл бұрын
Loved how quick and concise this tutorial is. Would love to see the navigator for layers/stacking/organization. Cheers mang
@shortdailyinsights2 жыл бұрын
Hi Nikolai is there some way to disable the automatic swiping ? :)
@jeroenbruijn54792 жыл бұрын
Hi Nikolai.... Just wanted to thank you. It's by far the most elegant cms slider solution i came across.
@NikolaiBain2 жыл бұрын
Thanks Jeroen, great to hear!
@tschinzgl2 жыл бұрын
Really great tutorial!! Just one thing: is it possible to disable the autoplay?
@karan.k8 ай бұрын
yeah, the autoplay kills it. I just need it to be static.
@jesuspastr Жыл бұрын
Thank you very much! I am doing a project for a client and this tutorial has helped me a lot. Greetings from Peru
@toryche13102 жыл бұрын
This was the first custom code tutorial that I followed and got the same result :) thank you so much for sharing! very helpful!
@jessiekatz11 ай бұрын
This is awesome! Any way to turn off the automatic sliding though, so it only advances on a mouse click?
@Turlingo3 ай бұрын
I’m looking to turn off the auto scroll as well. Have you found a way to do that? Thanks in advance!
@raresvv Жыл бұрын
Great work Nikolai! Is there a way to stop the slider from moving by itself?
Genuinely one of the best videos for a cms slider for webflow! I was looking for something like !!!!!
@julia.ohorodnik2 жыл бұрын
Hi Nikolai! ! Thank you a lot for this tutorial) Is it possible to display the slider without the autoplay?🙈
@pariphats10 ай бұрын
Glad I found this vid! after trying many slider and didn't work out. This code works quick and great . Thanks for great tutorial and coding 🍻
@toCatchAnAI2 жыл бұрын
This is way better than all CMS sliders I found. Thank you!
@daynabrick48486 ай бұрын
Pulling my hair our looking for a simple tutorial like this - still works great in 2024. Cheers!!
@seyedhosseini74472 жыл бұрын
I started working from a clean project and learned a few things to make it work! Very good thanks again!
@NikolaiBain2 жыл бұрын
Nice, great to hear! 😁
@slipstream018 ай бұрын
Wow this is been a big help thanks, im sure there are other ways to do this but this was the simplest way to get this out of the way. Wonder why doesnt webflow have this fixed since they talk so mucha bout CMS and charge so much about it.
@TheLaki19832 жыл бұрын
Exactly what I was needed! Perfect! Thank You so much. I wish to see how can I do last card be opake from 0-100% when it moves.
@FavourAderemi-x3z10 ай бұрын
Thank you for this video, really helpful and simple to grasp. quick question though, If I have couple of other sliders on the same page(CMS sliders) how do I name the collection list and navigation without it interfering with the other slide.
@necro05 Жыл бұрын
Great tutorial, I've just got one thing to add and one question: 1. The back arrow needs to be named "prev-slide" not "previous-slide" as instructed. 2. How can I get dot navigation to populate in addition to the arrows?
@FullStopDesign-qp5tw Жыл бұрын
Thank you
@Kljopa7 ай бұрын
Amazing video. Any idea how to make the responsive autoplay with correct distance? Eventually the slides cut in half I guess it would be possible from weblocks js code?
@almostholystories7 ай бұрын
Thank you! Looks very good! But I can't find the problem... maybe you can help me) Before the publishing all items position are horizontal but after publishing all items are vertical. What the problem can be with FLEX or maybe some updates in style of script? Thx
@gaminwithgc3 жыл бұрын
Great job again, Nikolai! Looking forward to the next tutorial!
@lulli912 жыл бұрын
Thank you mate! You're awesome! You saved my life!
@VoyagesJapan3 ай бұрын
Really great tutorial, Nikolai! Thank you for posting this. Subbed through my personal account! Question for you. How can you link each of the cards to go to a different URL, when you've set up a universal Link Block within the collection? Won't all of the links go to the same place if you set it up that way? Am I wrong?
@leonardomaldonadodesign68012 жыл бұрын
Amazing! Congrats! Maybe a tutorial on CMS Lightbox Gallery would be great!
@banders-ralfs Жыл бұрын
Thanks for video . Helpfull stuff. Cheers Nicolai !
@thejohnzapido Жыл бұрын
Thank you so much. The most clear tutorial for CMS slider so far 💪
@janeinafewwords Жыл бұрын
OMG thank god for this !!! finally!! I read the comments but no answer so far: any news on disabling auto scroll? 🙂
@akbarbadsha257 ай бұрын
This is so good. I have tried a lightbox on the bottom of the main image. but the lightbox inside the slider is not working, could you please tell me why this happened. Hope you respond this
@connorfinlayson3 жыл бұрын
DAYUM. I am going to use this one for sure
@MichelleChimuka-b7t9 ай бұрын
Hi Nikolai, thanks for this! Was easy to build and works perfectly. I'm running into a problem on mobile view though the slider element is creating horizontal shift of the whole page on mobile.. When i apply auto overflow, the whole slider element doesnt show up anymore on the site. Any help or idea where i am going wrong?
@aymericgin99542 жыл бұрын
Hi ! Thank you a lot for this tutorial. You helped me a lot 👍🏻 Is it possible to display the slider without the autoplay ?
@ThreeFreeTrees2 жыл бұрын
I'm having a pretty tough time trying to figure out how to paste in the code to customize the timing of the slider. Any help would would be incredibly appreciated!!
@FromTheDeep24812 жыл бұрын
This is perfect - going to be using this a lot! Thanks so much Nik!
@Jouerart2 жыл бұрын
Thank you a lot, simple, beautiful and it's works !!
@lucyeru27579 ай бұрын
This is SO helpful! Thank you.
@dereksiuau5 ай бұрын
Amazing! Super simple - GReat tutorial!
@loganbenjamin89222 жыл бұрын
Awesome, awesome, and more awesome! I have tried (and failed) to make a fully custom slider for over a year, but this tutorial finally solved the problem for me! Two questions: 1.) Is there a way to increase/decrease slide duration through custom code? 2.) Can custom slider dots be added (with specific class names) and tie in with the number of slides?
@NikolaiBain2 жыл бұрын
Hey Logan! so to change the slide duration, you just remove the "weblocks.io/script-66-529.js" link and add the code itself. That way you can tweak all of the javascript to how you want. For custom dots, you should be able to as the slider is derived from swiperjs.com, but I haven't done the implementation to try and add it. Maybe play around and see if you can figure it out!
@aymericgin99542 жыл бұрын
@@NikolaiBain Hey Nikola, can you be more precise on how to change and add the custom code please, i' tried but nothing works...
@ihsaan78073 жыл бұрын
Keep these coming. So good!
@NikolaiBain3 жыл бұрын
Thank you!!
@writersnoise8 ай бұрын
That was quick and easy to follow. Can you do a tutorial on adding filters to this slideshow content?
@nadiasiddiqah72912 жыл бұрын
Great beginner friendly video!
@yunadzukifaruhatoo1431 Жыл бұрын
Thank you, everything works, but what should I write so that the slides do not switch automatically? I want them to switch only with the mouse
@zachlee7075 ай бұрын
Great tutorial but I'd love to add pagination! Is there any way to do that?
@RichardAdule-rw5vq Жыл бұрын
Thank you for this it was very straight forward. Is there a way to disable the auto scrolling to the next slide?
@sebdiable Жыл бұрын
This would be awesome!
@abinkumar71763 жыл бұрын
The nicest and simplest implementation of CMS slider. I used slick slider for one of my projects And I have multiple CMS sliders in my page...clicking on prev and next buttons on a particular slider moves all the sliders in the page. How do I fix that ?
@NikolaiBain3 жыл бұрын
Hey Abin! Alrighty so with multiple instances it gets a bit complicated, but it is doable. You'll have to get the code linked in the js (weblocks.io/script-66-529.js ), and add the code as a duplicate to the section of the custom code. Then you just change the classes in the custom code to be new classes, and for the second slider, change the classes to those new ones that you just changed in the custom code. It's a bit of a workaround, especially if you have more than 2 sliders, but that's the best way I can think of! :)
@RheaParakh Жыл бұрын
Loved this! He Nicolai can you tell me how we can add 2 CMS collection sliders on one page with this code?
@liv-strawbridge2 жыл бұрын
Thanks so much Nikolai 🙏
@jokVentures2 күн бұрын
Hi, ,may I ask how I can turn off the auto play of the slider? I know this vid is 3 years old, but it's still helpful till now, thank you. edit: figured it out, just paste the 3rd script content itself, then remove/comment the autoplay...
@Tony-i6tАй бұрын
Thaaaanks! Was a pain for years ...
@patinoart4 ай бұрын
This was perfect, thank you!
@davialkimim3140 Жыл бұрын
Thank you so much! You save my project and my job!!!!
@fazlu1492 жыл бұрын
Awesome, and peeps code works for static elements also it's not just for cms custom slider.
@LeighWhiting Жыл бұрын
Hi! Great tutorial, thank you! I am stuggling to get my new buttons to display.
@kaustav5955 Жыл бұрын
A fantastic tutorial in a short time. Thank you very much.
@michaelraitt37083 жыл бұрын
absolute legend mate
@NikolaiBain3 жыл бұрын
🦾🦾🦾
@yvonlangue2 жыл бұрын
Hi there, I this has been so helpful. Thank you so much. I am facing an issue with the limitation of slides, which at some point, stop showing. Can you please point at something I could/should look into? Thanks a lot.
@yvonlangue2 жыл бұрын
I found one possible solution in the webflow cms list itself: beyond 100 items, one needs to activate pagination.
@danielchalke8554 Жыл бұрын
This is great work, thanks Nikolai. Is it possible to loop the collection?
@luketype4242 Жыл бұрын
Great work mate, thanks
@muaviacreation37956 ай бұрын
don't have words to Thanks✨✨✨✨✨✨
@adaptivecodeio Жыл бұрын
Excellent tutorial, thank you
@matt.banton2 жыл бұрын
Really well explained, thank you! Maybe a tutorial on setting up a responsive navigation, that would be super helpful
@NikolaiBain2 жыл бұрын
Thanks for the idea! I've just put that on my video backlog 🦾
@matt.banton2 жыл бұрын
@@NikolaiBain Awesome, I'll keep an eye out for it!
@threadlink Жыл бұрын
Hey Nikolai, I was trying to implement this slider but was running into a problem. I have an animation on the Slider Item but it stops working when the CMS loops. Is there something I should be doing?
@akashghavalkar74492 жыл бұрын
Hey Nikolai, great tutorial! However, I did this in a CMS Collection Page and it didn't work. Any idea why?
@cesarv.63652 жыл бұрын
Thank you so much for posting this video! I've implemented your carousel in a website iI'm working. I wondering where did you find this resource or how did you learn about this.
@akbarbadsha254 ай бұрын
Hey Nikolai, can we use multiple cms slider in a single page. How can we setup this. Please help me
@tonbraebufegha85652 ай бұрын
hello, this slider currently auto slides... is there a way we can adjust it to not move automatically?
@sinanouri50359 ай бұрын
Thank you for the tutorial. Actually, I want to design a slider with a background video in it, I want it to play the video in reverse when I click the back button on the slider, is this possible?
@frankdrolet94392 жыл бұрын
It would be really helpful to show the hierarchal tree on the left to show on which layers you're working on, thanks!
@NikolaiBain2 жыл бұрын
You bet, thanks for letting me know :)
@AsherWoltermann Жыл бұрын
Agreed! I am having trouble getting more than one CMS item to show (when I select flexbox, it isn't showing more than one item at a time), and am experiencing some weird overflows in the list container! Understanding the settings on the different divs would help!
@lifeon2wheels_ Жыл бұрын
Is it possible to make more sliders on the same page using this method? Would have various collections where this would be useful
@tomzahradka2 жыл бұрын
Hi Nikolai. Is there an easy way to disable auto-scroll?
@brigittavarga5525 Жыл бұрын
Hey there, it‘s been a while since you commented this, but have you found any solution to this? I‘m wondering about the same...
@tomzahradka Жыл бұрын
@@brigittavarga5525 unfortunatelly, no. but just recently, i started to use those "Relume Untitled UI" components, which you can add as a library to your webflow designer and it has a few slider components, which works very similarily to this. there are few things you need to change, if you need to use dynamic content using some finsweet tutorial, but it is managable and there are videos to solve it ) good luck!
@kevodiazz Жыл бұрын
Is there a way to do that a blog post in Webflow?
@mathieunisen4002 жыл бұрын
amazing job! 1000 thanks for all the work! It will be very useful. Is there a way to stop the automatic movement and make the slider move only with the mouse or the arrows? Keep it up, it's fantastic
@eliasreyes6236 Жыл бұрын
did you ever find out?? i have been trying to stop that as well
@mathieunisen400 Жыл бұрын
@@eliasreyes6236 I just copied/pasted the code and adapted it myself
@AsherWoltermann Жыл бұрын
@@mathieunisen400 when I copy paste the code in (removing the src="link" and placing it between (pasted here) , the whole thing stops working. Do you have any specific instruction on how you copied it in and got it to work?
@eugenesoch82472 жыл бұрын
Hi Nikolai, awesome tutorial! Thank you. I have one slight problem - one the transition happens, incoming block apears to slide in without image and only when it's in, the image loads. Did I do something wrong? This only happens on mobile.
@asherwoltermann59648 ай бұрын
I have had some mixed experiences getting this to work! It's perfect on one site, but on another site, when I add javascript the card at least changes data, but the CSS adds glitches with the arrow loading and disappearing, and swiping not working at all, but then on mobile it's working? So curious and such a bummer because this was really easy to implement on the first site
@asherwoltermann59648 ай бұрын
Follow up for anyone experiencing this-- check container settings! I had the outermost container set to no overflow and needed to change up those settings to make sure no overflow was on the right container for the slider to slide
@janjan0219 Жыл бұрын
Does this work if I use multiple CMS collections with the same code and class?
@pablosara2 жыл бұрын
Very cool!
@asheemshrestha2 жыл бұрын
This is cool. But I got a problem. I have two sliders in same page, the slider navigation of one slider also triggers another slider. What should i do?
@shadi5885 Жыл бұрын
If the items in a CMS are dynamically populated (after page load) I noticed that this system breaks down and does not work. In my use case, I have a CMS collection that populates the collection based on your cart selections, so as you add another item to the cart, it adds it to the collection, this means that the amount of items varies, would you have a solution for this? As is, the slider doesnt work on my site :( It breaks far too easily. Would be cool if it re-calculated slider movement after every "click" event. I think that would solve my problem as new items are added via clicking on a button on the item
@susanrainey96942 жыл бұрын
This is great! Thanks
@cannonleo Жыл бұрын
can you helop me out here @nikolas, tried using thr custom code and the scroll effect doesnt work at all
@alexandermikolyk7987 Жыл бұрын
How do I remove the infinite scrolling?
@AsherWoltermann21 күн бұрын
I have gotten this to work so many times and for some reason the last two sites I built I cannot get it to work. Anyone out there figure out if there is something specific needed or changed?
@spookytk Жыл бұрын
What does the javascript do? Having to link to three external javascript seems unsavory.
@ahmedtahqiq60563 жыл бұрын
Hey Nikolai! I tried using it on a project, but I can't seem to be able to make it work for some reason. I did do a few adjustments according to my own layout, but that's about it
@NikolaiBain3 жыл бұрын
Hey Ahmed! Would be good to know the specific issue you're having, and if you can drop in your read-only link for the project. I'll try to figure out your issue with you 😊
@NikolaiBain3 жыл бұрын
For reference for others, the issue was making sure to name the CMS collection classes correctly. You want "Slider Wrapper" then "Slider List" then "Slider Item"
@normatives81862 жыл бұрын
Just what I was looking for, awesome! If we wanted to have two sliders with their own unique designs, would we copy and paste the weblockscript twice? So this would create two swiper instances which would allow us to customize class names for each and therefore allow us to have two sliders? Sorry if I worded this strangely lol
@NikolaiBain2 жыл бұрын
Hey! I mentioned this is another comment: So with multiple instances it gets a bit complicated, but it is doable. You'll have to get the code linked in the js (weblocks.io/script-66-529.js ), and add the code as a duplicate to the section of the custom code (not the link, the actual code from the link). Then you just change the classes in the custom code to be new classes, and for the second slider, change the classes to those new ones that you just changed in the custom code. It's a bit of a workaround, but that's the best way I can think of! :)
@heydetya2 жыл бұрын
@@NikolaiBain Hi, can you explain it more about this? Thanks!
@jokanstudio Жыл бұрын
Hello, since a few days I have troubles with your solution. The sliders are not rendering anymore. Arrows disappear and slides stays static. SOLUTION: wrap the Nikolai's solution into a div ".swiper".
@jesushusbands42482 жыл бұрын
Great Nikolai! Is there a way to make this infinite?
@NikolaiBain2 жыл бұрын
Yo! Should already be infinite, let me know if there's more info you want to add and I'll see if I can help :)
@jesushusbands42482 жыл бұрын
@@NikolaiBain Thanks Nikolai will let you know if i have any problems
@andrzej-zaki2 жыл бұрын
Thanks for this great tutorial Nikolai. Unfortunately, it doesn't work for me. I follow along and when I publish it, there is no interaction. The slide doesn't work and I don't figure it out why. I'm feeling stuck right now ...
@NikolaiBain2 жыл бұрын
Hey Andrzej! Send through the read only link and I'll see what the issue is :) got it work for plenty of people so must just be a slight issue
@andrzej-zaki2 жыл бұрын
@@NikolaiBain Thanks Nikolai. I'll send you this today. (Finally I find the problem. A class name was wrong and there was a js conflict. )
@ranellhandmade35833 жыл бұрын
Great job thanks for the tutorial, can you please show us how to make the previous and the next slider appear with the same dimension?
@NikolaiBain3 жыл бұрын
Hey Ranell, did you mean the prev and next buttons? If so you'll just have to give those a set width and height :)
@joelm19883 жыл бұрын
Is it possible to amend the script to use custom class names? For example using slider__wrapper instead of Slider Wrapper. I really like your solution but would like to use my own naming conventions.
@NikolaiBain3 жыл бұрын
Hey Joel, it is possible! Take the url for the script: weblocks.io/script-66-529.js, and instead of linking it in the body, just copy and paste the code in, then change the class names to whatever you want them to be! Let me know if you get that working :)
@magic_miles Жыл бұрын
@Nikolai Bain nice! Was looking for this comment. Maybe pin it for us client-first folks 😅
@magic_miles Жыл бұрын
@@NikolaiBain Quick follow up for this - does all the code in this URL go inside the or in the before section? Must be doing something wrong because I replaced the class names but all my code is showing on the site after I publish
@smileordiexxx Жыл бұрын
Super easy & worked great! Is there a way to slow down the automatic scrolling?
@MichaelMayr-w9t Жыл бұрын
can somebody tell me how to change the time of each slide?
@tomascastro4189 Жыл бұрын
How do you make the arrow image div you created to control the slider to actually control the slider?
@jislandlake3 ай бұрын
Would somebody be able to confirm if this code still works? I was unsuccessful.
@DariVergel2 жыл бұрын
Hi! I'm having a lil bit of trouble managing the slider. When I get to the last slider item, looks like an error. On yours you can see the first slider item when you finish the slide and start over again. What can I do to accomplish that?
@NikolaiBain2 жыл бұрын
Feel free to send a link to the site so I can see what's going on, otherwise just check your browser console to see if any errors are coming up 😊 it could also be to do with the size of each slide, double check that