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!!

@NikolaiBain

2 жыл бұрын

Thanks Carmen, glad you found it helpful! 😁

This was the first custom code tutorial that I followed and got the same result :) thank you so much for sharing! very helpful!

Loved how quick and concise this tutorial is. Would love to see the navigator for layers/stacking/organization. Cheers mang

This is way better than all CMS sliders I found. Thank you!

Great job again, Nikolai! Looking forward to the next tutorial!

Hi Nikolai.... Just wanted to thank you. It's by far the most elegant cms slider solution i came across.

@NikolaiBain

2 жыл бұрын

Thanks Jeroen, great to hear!

Genuinely one of the best videos for a cms slider for webflow! I was looking for something like !!!!!

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!!!!

Thank you very much! I am doing a project for a client and this tutorial has helped me a lot. Greetings from Peru

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!

OMG I was looking for this for so long... I wanted something simple and easy, and this fits the bill. Thank you!!!

This is perfect - going to be using this a lot! Thanks so much Nik!

Thank you so much. The most clear tutorial for CMS slider so far 💪

I started working from a clean project and learned a few things to make it work! Very good thanks again!

@NikolaiBain

2 жыл бұрын

Nice, great to hear! 😁

Keep these coming. So good!

@NikolaiBain

2 жыл бұрын

Thank you!!

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 🍻

Thanks for video . Helpfull stuff. Cheers Nicolai !

Thank you a lot, simple, beautiful and it's works !!

Great beginner friendly video!

A fantastic tutorial in a short time. Thank you very much.

I'm never using Webflow's slider again. Your slider is the best any use case. Thank you.

Hi Nikolai is there some way to disable the automatic swiping ? :)

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.

this is the most impressive thing ive ever seen in my life

@NikolaiBain

2 жыл бұрын

Hey what a compliment 😏

Thank you mate! You're awesome! You saved my life!

Great work mate, thanks

Hi ! Thank you a lot for this tutorial. You helped me a lot 👍🏻 Is it possible to display the slider without the autoplay ?

Hi Nikolai! ! Thank you a lot for this tutorial) Is it possible to display the slider without the autoplay?🙈

This is SO helpful! Thank you.

Amazing! Super simple - GReat tutorial!

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.

Amazing! Congrats! Maybe a tutorial on CMS Lightbox Gallery would be great!

Excellent tutorial, thank you

Thanks so much Nikolai 🙏

This was perfect, thank you!

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.

Really well explained, thank you! Maybe a tutorial on setting up a responsive navigation, that would be super helpful

@NikolaiBain

2 жыл бұрын

Thanks for the idea! I've just put that on my video backlog 🦾

@matt.banton

2 жыл бұрын

@@NikolaiBain Awesome, I'll keep an eye out for it!

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.

DAYUM. I am going to use this one for sure

Thank you so much! You save my project and my job!!!!

This is great work, thanks Nikolai. Is it possible to loop the collection?

Super easy & worked great! Is there a way to slow down the automatic scrolling?

Hey Nikolai, thank you for this! Do you know how can I disable the swipe gesture? It seems to be colliding with the mouse click. If the mouse moves accidentally 1 px when I click, it believes you want to swipe and it doesn't open the content. If this is fixable that would make it perfect! (unless I'm doing something wrong :-).

Pulling my hair our looking for a simple tutorial like this - still works great in 2024. Cheers!!

absolute legend mate

@NikolaiBain

2 жыл бұрын

🦾🦾🦾

This is great! Thanks

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

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?

Really great tutorial!! Just one thing: is it possible to disable the autoplay?

@karan.k

5 ай бұрын

yeah, the autoplay kills it. I just need it to be static.

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.

Great work Nikolai! Is there a way to stop the slider from moving by itself?

@jaiswalvishal86

Жыл бұрын

You can replace the last script with this code $(document).ready(function () { var slider_wrapper = new Swiper(".slider-wrapper", { wrapperClass: "slider-list", slideClass: "slider-item", navigation: { nextEl: '.next-slide', prevEl: '.prev-slide' }, pagination: { type: 'bullets', el: '.pagination', clickable: true, }, speed: 700, slidesPerView: 'auto', loop: true, on: { init: function () { var swiper_pagination_bulletwe_style = document.createElement('style'); swiper_pagination_bulletwe_style.type = 'text/css'; swiper_pagination_bulletwe_style.innerHTML = ` .swiper-pagination-bullet{ background:#fff; margin-right:8px; transition:.2s; } `; document.getElementsByTagName('head')[0].appendChild(swiper_pagination_bulletwe_style);var swiper_pagination_bullethoverwe_style = document.createElement('style'); swiper_pagination_bullethoverwe_style.type = 'text/css'; swiper_pagination_bullethoverwe_style.innerHTML = ` .swiper-pagination-bullet:hover{ opacity:.7; } `; document.getElementsByTagName('head')[0].appendChild(swiper_pagination_bullethoverwe_style);var swiper_pagination_bullet_activehoverwe_style = document.createElement('style'); swiper_pagination_bullet_activehoverwe_style.type = 'text/css'; swiper_pagination_bullet_activehoverwe_style.innerHTML = ` .swiper-pagination-bullet-active:hover{ opacity:1; } `; document.getElementsByTagName('head')[0].appendChild(swiper_pagination_bullet_activehoverwe_style);var swiper_pagination_fractionwe_style = document.createElement('style'); swiper_pagination_fractionwe_style.type = 'text/css'; swiper_pagination_fractionwe_style.innerHTML = ` .swiper-pagination-fraction{ font-size:16px; } `; document.getElementsByTagName('head')[0].appendChild(swiper_pagination_fractionwe_style);var slide_imagewe_style = document.createElement('style'); slide_imagewe_style.type = 'text/css'; slide_imagewe_style.innerHTML = ` .slide-image{ transition:transform .2s; } `; document.getElementsByTagName('head')[0].appendChild(slide_imagewe_style);var slide_contentwe_style = document.createElement('style'); slide_contentwe_style.type = 'text/css'; slide_contentwe_style.innerHTML = ` .slide-content{ transition:opacity .2s; } `; document.getElementsByTagName('head')[0].appendChild(slide_contentwe_style);$('.slider-item').on('mouseover',function() { $(this).find('.slide-image').css({ 'transform':'scale(1.1)', }); $(this).find('.slide-content').css({ 'opacity':'.8', }); }); $('.slider-item').on('mouseout',function() { $(this).find('.slide-image').css({ 'transform':'scale(1)', }); $(this).find('.slide-content').css({ 'opacity':'1', }); }); }, }, }); });

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!!

Hi! Great tutorial, thank you! I am stuggling to get my new buttons to display.

That was quick and easy to follow. Can you do a tutorial on adding filters to this slideshow content?

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?

OMG thank god for this !!! finally!! I read the comments but no answer so far: any news on disabling auto scroll? 🙂

Awesome, and peeps code works for static elements also it's not just for cms custom slider.

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!

Very cool!

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?

@NikolaiBain

2 жыл бұрын

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!

@aymericgin9954

2 жыл бұрын

@@NikolaiBain Hey Nikola, can you be more precise on how to change and add the custom code please, i' tried but nothing works...

This is awesome! Any way to turn off the automatic sliding though, so it only advances on a mouse click?

@Turlingo

25 күн бұрын

I’m looking to turn off the auto scroll as well. Have you found a way to do that? Thanks in advance!

Loved this! He Nicolai can you tell me how we can add 2 CMS collection sliders on one page with this code?

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?

@NikolaiBain

2 жыл бұрын

Hey Ranell, did you mean the prev and next buttons? If so you'll just have to give those a set width and height :)

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.

@yvonlangue

2 жыл бұрын

I found one possible solution in the webflow cms list itself: beyond 100 items, one needs to activate pagination.

Is it possible to make more sliders on the same page using this method? Would have various collections where this would be useful

Hey Nikolai, great tutorial! However, I did this in a CMS Collection Page and it didn't work. Any idea why?

Hi Nikolai, thank you so much for this great tutorial :) I applied this to my client work and He really like the lazy load in the slider. But, the problem is that I have to export the code for my client, as you know that Webflow don't allow code export for CMS collections. When I publish my exported code locally it shows "Items not found" in the slider section. Can you please help me out to design this slider as it is without CMS collection because I have already tried but it doesn't work. Could you please help me with that as I have to submit my work within 2 days deadline, I'll be really grateful. Thank you :)

is there any way we can add sliders vertically and show 6 slider on view one and other six sliders on view 2?

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

11 ай бұрын

Thank you

How do you make the arrow image div you created to control the slider to actually control the slider?

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

How did you make those previous and next work without adding interaction?

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?

don't have words to Thanks✨✨✨✨✨✨

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?

Is there a way to do that a blog post in Webflow?

Great tutorial but I'd love to add pagination! Is there any way to do that?

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

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 ?

@NikolaiBain

2 жыл бұрын

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! :)

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?

Are we adding the overflow none to the section itself or the container you put inside the section?

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?

How do you stop the slider from automatically moving to other slides?

Does this work if I use multiple CMS collections with the same code and class?

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

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?

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

@NikolaiBain

2 жыл бұрын

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! :)

@heydetya

2 жыл бұрын

@@NikolaiBain Hi, can you explain it more about this? Thanks!

I don't understand how when you made the arrow Divs they were able to control the position properties of the above images

It would be really helpful to show the hierarchal tree on the left to show on which layers you're working on, thanks!

@NikolaiBain

2 жыл бұрын

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!

What does the javascript do? Having to link to three external javascript seems unsavory.

How do the arrows automatically control the slider??

How do I remove the infinite scrolling?

Hey Nikolai, can we use multiple cms slider in a single page. How can we setup this. Please help me

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

@asherwoltermann5964

5 ай бұрын

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

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?

@NikolaiBain

2 жыл бұрын

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

can somebody tell me how to change the time of each slide?

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.

@NikolaiBain

2 жыл бұрын

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

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 ...

@NikolaiBain

2 жыл бұрын

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-zaki

2 жыл бұрын

@@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. )

Hi Nikolai, thanks for the tut. I have implemented in my page but I have just one comment: How can I control the times the entire cms collection appears in the carrousel? I'm implementing it for a related products in an e-commerce but I don't know for which reason the slider charges the entire collection 3 times in a row until it stops. It happen when I publish but not when I preview in Webflow. Any feedback please? Many thanks and congrats!

@NikolaiBain

2 жыл бұрын

Hey Toni, if you're meaning the speed of the slider then this is easily changed, but otherwise you'll have to send a preview link as I'm not too sure what you mean :)

@user-mp4pq9vp4x

Жыл бұрын

@@NikolaiBain how is the speed of the slider changed?

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

@NikolaiBain

2 жыл бұрын

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 😊

@NikolaiBain

2 жыл бұрын

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"