CMS Draggable Slick Slider in Webflow (2020)

Join my Webflow Wizards Community
/ timothyricks
In this video, we'll build a draggable, responsive collection item slider using Slick slider.
1. Collection Background Videos
www.notion.so/timothyricks/Em...
2. Disable Click
www.notion.so/timothyricks/Di...
3. Play Background Video on Hover
www.notion.so/timothyricks/Pl...
4. Slick Slider Code
www.notion.so/timothyricks/Sl...
5. Customize Background Color in Item
www.notion.so/timothyricks/Cu...
6. Customize Background Color of Body
www.notion.so/timothyricks/Un...
Try Webflow using my affiliate link below.
webflow.grsm.io/4840096

[@mrbenburns]

GREAT tutorial Tim. Exactly what I’m looking for. Question for you: What if you had multiple collection sliders like this on one page? You would need to change the button code right? Otherwise all the sliders would activate on click?

[@timothyricks]

Thanks so much! Yes, that's right. We'd need to change the button code to this. It would work as long as each slider is in its own div with a class of "section". $('.slider-prev').click(function(){ $(this).closest('.section').find(".list").slick('slickPrev'); }); $('.slider-next').click(function(){ $(this).closest('.section').find(".list").slick('slickNext'); });

[@mrbenburns]

@@timothyricks Phenomenal. I'll be sharing the vid on stream tomorrow and following it live :)

[@timothyricks]

@@mrbenburns Awesome! Thanks so much!

[@vineetboyle]

dude this is sick. You're literally making complex things look so easy.

[@fjb9095]

That video embed from the collection is brilliant, thank you!

[@stvngunn]

Dude!!! This is an excellent & thorough tutorial. Thank you for doing this and for the other videos too. They're all superb!

[@timothyricks]

Steven Gunn Thanks so much! Happy to help!

[@loganbenjamin8922]

Keep these streaks going!! I would love to see another full site development tutorial!

[@charlimarieTV]

This is SO USEFUL!! Thank you thank you for making such an easy-to-follow tutorial!!

[@timothyricks]

So happy to help!

[@SebastianDexas]

I have been looking for something like this for such a long time, thanks alot it was very helpfull.

[@jensv8859]

Thanks Timothy. Great tutorial! Keep it up!

[@akbarbadsha25]

Always very useful content. Everything is top class tutorials. Best tutorial and support for webflow. Thank umyou so much 👍

[@danielcobb6486]

This is sooooo much better than the default slider Webflow gives us - love this dude.

[@timothyricks]

Thank you, man!

[@merkmotief]

Awesome solution man! Thanks a lot for a very instructive tutorial :-)

[@runeverland4927]

Great work! Thank you so much😊

[@erwinluijendijk3922]

Woooww! Needed this 😍

[@mrbenburns]

Def subscribed btw, great channel

[@emri2927]

Thank you very much for your work ! It's really helfull !!

[@adrianrogala9408]

TIM YOU THE BEST ! :DDD

[@MichalCzerlikowski]

this is great!

[@LeoRivero]

hello Timothy, I'm sorry about this but I have a question! is it a specific plan I should have to be able to upload videos .mp4 to webflow. I currently have the Lite plan but I can't upload videos to the site. is it better to get the Pro version or does just adding site cms will allow me to upload videos .mp4 to the site?

[@teriko9472]

I never comment, but i have to say your channel has to have the best tutorials on webflow available. any way to support you so you can continue to give us some of that mighty knowledge?

[@timothyricks]

Teriko Thank you so much! I really appreciate the encouragement and am happy to be helping the community!

[@sportsfever69]

@@timothyricks I was gonna ask the same thing, just sent you a little something to show some love. Cheers

[@timothyricks]

@@sportsfever69 Thank you!! I appreciate it greatly! Glad to be providing value!

[@RichardReynolds]

Hi Timothy! First of alll thanks you for this awesome tutorial. I need to know is it possible to change the easing animation of the sliders.

[@pauljohn3898]

Super cool

[@juannoguera5918]

Hello, I have tears of joy thanks to your channel. IT'S AWESOMEEEE!!!! I would like to know where are you hosting the videos to get the url's, what are the options?

[@ninglizhu2255]

It was a great tutorial, but I got very confused because it just does not work out for me. ------->> in the step of > "HTML embed" ------->> "add field".there was no option of 'Video URL“，but only creat/ upgrade/ published on...really frustrated then ...

[@daph_w]

Hi Timonthy! Thanks for the tutorial! This is an amazing function to have on the website. I am just wondering how to add the same function without CMS? as the hosting plan, I have currently is basic plan, it doesn't include CMS, I've tried to use the same method but changed the class. It doesn't seem to work, can you give me some suggestions? Thanks!

[@katejohnson8182]

*chef's kiss* -have this implemented now thanks to you. What font are the arrows? WhatTheFont says these are in Reckless but that seems to be wrong.

[@kylepitocchelli1738]

Timothy can we set up this up without the snap function? Looking to just have a free horizontal scrolling collection list with client logos. Awesome work btw!

[@ambremgt8633]

This is great ! How would you do this for a vertical slider ? Many thanks !

[@kialcannon7561]

hi mate this is amazing, would you know how to add dots that show where you are in the scroll? also how to autoplay it?

[@JoeGuyon]

Hi Timothy ! Really nice slider ;-) We are actually integrating it into a big traveling Webflow site. We were wondering if we can slide 2 tiles at the times on Desktop while sliding 1 slide at the time on mobile ? Thank you very much for your help.

[@deluxestockholm6123]

Your tutorials are always so good I want to go to the next level after completing them! This time the next level is having multiple sliders on the same page. Any solution for that? I'm guessing it's easy if I only knew how 😂

[@donaldgriffin6383]

hey Timothy, great video!! One question: what if you wanted the content on the slick slider to horizatanlly slide slowly automatically? What would you have to do?

[@IDKWeWasBored]

Hi! Thank you for this tutorial, it's very helpful! I'm having an issue though that I hope you can help me with. I've taken the necessary steps to establish my draggable slider but when used inside my product page, when I choose use the variant picker and choose an option (size for example), it seems to break the slider and removes the draggable component. How could I work around this? Thank you!

[@deezy88888]

This is so awesome Tim! You are my actual hero! I'm having an issue making this work. When I publish my project and drag the items it suddenly gets wider each time. Been trying to figure it out for hours. Would love some help with this! Thank you

[@jodieball612]

Same thing is happening to me. Would love to solve it :(

[@VetlyApp]

Hey. This is really great. Though it breaks in webflow when i use it with a filter for my product variants (ie, product variant images that load in with dropdown selection) Is there anything i can do to make sure the javascript runs when the images are repopulated via a select dropdown?

[@mazenalkadri3376]

Hi Timothy, What an amazing work thanks for all the time you spend sharing your experience with us! i have a question about the slider: where did you host the videos and can you please provide us some tips about best ways to host materials outside webflow? thanks in advance!!!!

[@TamirYankevich]

hey did you figure this out? I am not sure how he went about adding the video url to the code - I can't seem to get it to show up in the embed box.

[@Gustavoandrighetto]

@@TamirYankevich did you manage to get the solution for this?

[@dennisvinther9186]

Hi Timothy - First of all great work on your tutorials. When I'm trying to make this slider, the plugin overwrite my cards flexbox settings with display block. Any solution for that ?

[@adrianrogala9408]

Great tut! Another thougts that come to me is: Can we make it with load more button? just asking casue im the fresh no code guy and dont know all of this powers!

[@samanthavolpe183]

Recommendations on how to host an .mp4 file? Since they don't host in Webflow as assets I'm not seeing services how to solve this - or if vimeo does .mp4 urls

[@EthanAcapella]

Hi man, is there a way to deactivate the drag option and just keep the arrows? I've combined this drag slider with the page transition and every time I click to drag the page transition is triggered and take me to the cms page when I release the click. Otherwise, what would be the best way to fix this and make both things work fine together?

[@jenniferward6821]

Your tuts are fabulous please do o e on maps and getting markers on the map can’t see anywhere to have a lay long number on webflow CMS

[@jean-luctheard2073]

Hi, It looks great and all but I've been trying to add the embed video url from youtube and every time I try to add a field for the video it is not there. Everything else in the collection appears in the drop down except the video. Can I get any help on that?

[@nathangarland7711]

Hello Mr Ricks! Thank you again for the great content. I am in need of some help, for some reason my sliders are overlapping on the published desktop site. It doesn't on the unpublished site. Any help would be greatly appreciated.

[@leonardomaldonadodesign6801]

Hey Timothy! Amazing content as always! Is it possible to do this without the CMS collection? The client has his own hosting so I'll need to export the page as static. As we all know, the export code feature only allows static content. Thanks!

[@dochi7074]

Hi, Leonardo did you find a solution to your question? I have the same problem. Still a newbie in Webflow any help will be welcome.

[@timcheckley8095]

Thanks so much for this slider, it's great! Question for you. I'm building an Arabic website, which is a language that reads right to left. Is there a way to start, on page load, with the slider scrolled over to the LAST item (so that users can then scroll from right to left)?

[@Dashproducer]

I was wondering if there is a way to start at the end of the list ( the last item) and scroll to the left? Whenever I publish my site the list starts at the beginning (most left position) whereas I want the last part to be visible firts.

[@susikrummenacher5147]

Any chance you could extend this tutorial? :D How to add a CMS modal/lightbox to this slick slider? So when you click on the card you can see an of the video with some detail information (CMS Textbox)?

[@Ellonirie]

Hey Timothy! would it be possible to turn off the snapping?

[@jodieball612]

This was exactly what I was looking for but it no longer works. Might be an issue with styling but the cards are stacked vertically and are full width of the page instead of how I styled them. Not sure how to fix it. I'm not a dev, but am really hoping to use this feature!

[@RaulPfammatter]

On page load the paused videos do not appear straight away when I recreated this. Instead, there is only a black background. Once I have hovered over all of the boxes once everything works perfectly fine. Does anyone know how to make it work directly on page load? :)

[@jamesabadfernandez8002]

Thanks for the vid timothy, it has helped a lot, i just have one doubt...how can i do to add the dots to the slider, like with arrows there are to options next and prev but I don't know how to add the dots

[@timothyricks]

Sure thing! Glad to hear that. I think you would have to change dots from false to true in the code.

[@shreyansbhansali316]

I tried your code to create an infinite carousel but at the breakpoints, the cards move to the second row. Any clue why would that be happening? Any help would be appreciated.

[@scotthumphrey2336]

Hey Timothy, I'm trying to add a progress bar onto a slider, is it something you've successfully done yourself? If you google search this.. 'building-a-simple-progress-bar-for-slick-slider-' it's an article on medium, tried to implement but didn't have much luck. Any help would be awesome.

[@JokerBrand7]

I have a problem with the slick slider. Its not really responsive. When i shrink the screen to a smaller breakpoint ist don't respect the gutter between my card elements. In the webflow designer, everything is fine. But on the live site its broken. My card elemts are overlapping each other. What can I do?

[@alexm3931]

wow!!!!!!!!!!!!

[@yuriprado2721]

great video man... great channel!!! is that possible to implement a nav bar for the slider, like the circle icons or square to indicate how much slides we have ? tsk

[@timothyricks]

I think all you have to do is change dots from false to true in the code.

[@yuriprado2721]

@@timothyricks tks!!! another thing the background video code doesn't work to me... =(

[@markiscoolms]

Is it possible to restart a mp4 when it is slided out of view?

[@carlos_sepulveda]

Hi! this is so amazing! Is it possible to make it auto-play? Thank you in advance!!

[@worldofsamdefesa2045]

Is it possible to filter or categorize images inside cms slider in webflow.? anyone hav a solution?

[@erikwka97]

Love your tutorials! I am using a linkbox inside the slider-item to link to another website. Do you know how I can prevent to trigger a link while I drag the slider with the mouse?

[@markiscoolms]

Hi Erik, did you find a solution for this problem?

[@erikwka97]

​@@markiscoolms Unfortunately, not. But I was just thinking that you might be able to use Webflow's built-in interaction tool. Maybe you can hide a linked overlay as soon as you start moving the slider. So that the clickable linked area shows or hides at the right moment. Just an idea... hope it helps and if you find a solution I would appreciate it if you let me know

[@markiscoolms]

@@erikwka97 hi Erik, I removed the page loader and that seemed to do the trick. Why idk 🤷

[@zedexes]

This slider is a very good one, I'm trying to replicate it but without CMS, and I can't seem to make it work :( Somehow it shows only one, and if I try to drag it, it runs out of the screen and doesnt work anymore.

[@dochi7074]

Hi, Zedexes did you find a solution to your question? I have the same problem. Still a newbie in Webflow any help will be welcome.

[@NomadCulture]

where do you host the videos?

[@filipdahlgren6386]

Hello! great tutorial😀 I have one question: Where do you store your videos? Since you are not hosting them from vimeo or youtube etc. Thx

[@timothyricks]

I uploaded them as background videos in WebFlow, inspected the code to get the mp4 url, and then added each in plain text fields in the CMS.

[@filipdahlgren6386]

@@timothyricks Thanksyou✌🏼!

[@wearestudiotonic]

@@timothyricks This is so freakin' sly, I love it

[@brainybitesOfficial035]

i am confused where is gone your background video element? i did not get the desireable results

[@Kai-fp3kd]

Question: Is there a way to have multiple sliders on a page, each slider in its own section? Would we duplicate the code per slider, each having a different class name?

[@poppukonfilm]

What I want to know as well. Multiple on a page only allows the first to work.

[@akash_kr]

It was great but in mobile screens it sucks, is there any possible way to make it look better in every screen?

[@hhraj]

Hey! This is such a great tutorial I am replicating this with images, and my images are of different aspect ratios, I want them all to show up the same height with varying widths. In the webflow preview my settings look fine but when I copy the custom code for the slider, since the number of slides is set to 3, it crops the image or increases the spacing between images to make room for 3. If I comment out that part then it automatically shows only 1, is there a way I can make it not crop the images or add additional space?

[@timothyricks]

Thank you! This cloneable might help with that. webflow.com/website/Horizontal-Gallery-Slideshow-for-Photographers?fbclid=IwAR1qmHPcBhwu9rYa3NgOAGs9fQLv9zFjvqhkxMOb8nviCuXvIBU-Fd7ifxc

[@hhraj]

@@timothyricks Thanks a lot! appreciate it

[@christophernelson2261]

@@timothyricks Thank you very much for this cloneable. I was having trouble following along on my project, and seeing the cloneable showed me some important css settings that totally fixed it. Thank you!

[@sam-45632]

My page always overflows i dont know why i already have set the section to overflow hidden and it still overflows

[@raidermudder]

Tim, I can't get my videos to show up once published. I pulled the .mp4 URLs from uploaded background videos and they work just fine in the Webflow designer, but when I publish and look at the test page nothing shows up. Any ideas as to what may be going wrong. Thanks!

[@juannoguera5918]

Hello, would you share how to host the videos to add them to the CMS? I cant get an mp4 url from Google Drive!

[@ariyan_ahmed]

I have the same issue it's just showing up in the designer window but not into the actual build itself.

[@masonthompson3284]

Is there a way to set the background color change via the CMS?

[@timothyricks]

Yes, there is. Instead of adding the custom code to change the .bg-color div’s background, go to the settings panel and click pull background color from CMS field.

[@kylepitocchelli1738]

Timothy it seem when I push the item width to 40vw from 30vw the effect breaks and a second row of cms elements appear beneath the first few items. Any help would be great!

[@sam-45632]

have you solved it?

[@chriss7789]

This is happening to me too, specifically on anything mobile/tablet breakpoints

[@kylepitocchelli1738]

@@sam-45632 I ended up using script from a different tutorial which worked for me.

[@sam-45632]

@@kylepitocchelli1738 okay thanks

[@NCindie]

This is great! I am working with a church and I would like to incorporate this on the homepage hero section to show their latest method. The set up is.. They upload the video to youtube, Zapier pulls info to Webflow CMS, the filtering places it on the hero. Would this play feature be possible with a youtube link or would I need to add a CMS entry for video and upload an .mp4 clip from each?

[@timothyricks]

So if you just want to use the KZbin embed player inside each slider, your workflow would be fine, but if you want to use the videos as autoplaying background videos that can be paused, they would have to be uploaded to WebFlow directly like in the tutorial. I believe if you have Vimeo pro, they provide you with a link that can be used for background videos but KZbin cannot.

[@NCindie]

@@timothyricks Thank you!

[@thomaskim8466]

@@timothyricks Hey Tim, thanks for the tutorial! Its so beautiful. Could you elaborate just a bit on how to add a video to the internet so that you get an address with .mp4 at the end? I feel like this is a pretty noob question but I've never understood this..

[@juannoguera5918]

Hello has anyone solved the issue with video hosting solutions? I cant get an mp4 url with Google Drive! Help Tim!!

[@chriss7789]

What I did was 1. Add a background video element to a static page on your site. 2. Upload a mp4 or mov that’s less than 30mb 3. Publish the site, and go to the static page in a Google Chrome Browser. 4. Inspect the Video element. 5. Grab the code from there. Should look something like (uploads-ssl.webflow.com.......mp4) or (assets.website-files.com/randomfilename....mp4) 6. Place that mp4 or mov link in a text field titled “Video URL” in your CMS collection and it should work from there. Something I ran into was when I added a “Video URL” to the collection directly, I would get a Validation Error, so instead I made it a text field titled Video URL and it worked like a charm

[@AndrewJohnson-bh2ws]

I was wondering if anyone else has experienced this issue and if they could lend a helping hand to resolve it... when I publish the link and preview it, my items are stacked on top of each other. However, the second I drag the slider to the left OR change the size of my browser, they align horizontally as they should (spaced and functioning perfectly). Any solutions for this?

[@Andy-dn1vq]

Had the same issue as well. What I did (I don't really know if it is a clean practice or not. I'm not a dev, but it fixed it anyway haha) is to add "white-space: nowrap" after the .list display styling. So it becomes: .list {display: block !important; white-space: nowrap;} and I also "overflow : hidden" the slider_contain div

[@shivamshetty7082]

This doesn't work with the udesly adapter, is there a way to use this?

[@shivamshetty7082]

please reply to this if possible

[@jasonstevens9389]

Why 40 vw for the height of the card? I've seen this done a lot in webflow projects, but have never heard the reasoning behind it.

[@timothyricks]

If the width of the card is also set using vw, then using vw for the height will lock in the aspect ratio so it scales at the same ratio when the screen is resized.

[@simonbloom1]

I'm getting a wrapping of the items in chrome on some screen resolutions and can't find a solution

[@timothyricks]

Simon Bloom Usually this happens when something like margin, padding, or something else is set to px while the card width is set to vw. If it helps, you could inspect my cloneable to see if the styles are matching up. webflow.com/website/CMS-Draggable-Slider

[@matiash1675]

Did you find a solution? I ran into the same issue.

[@vikingfilmworks]

can this auto scroll?

[@nickcarvajal]

Can you share a cloneable?

[@SenoSbds]

is this still working?.. i use this but now the videos are not playing & can't use the next/previous button when i publish the website

[@indymetrovideo]

I can't drag on the slider without moving the entire page?

[@shivamshetty7082]

Hi is it possible to disable the effect on mobile?

[@timothyricks]

Yes, it is. You could replace the code inside the script tag with this.

[@timothyricks]

// when document is fully loaded $( document ).ready(function() { if($(window).width() > 991) { $('.list').slick({ dots: false, speed: 1000, infinite: false, slidesToShow: 3, slidesToScroll: 1, arrows: false, touchThreshold:300, responsive: [ { // tablet breakpoint: 991, settings: { slidesToShow: 2 } }, { // mobile portrait breakpoint: 479, settings: { slidesToShow: 1 } } ] }); $('.slider-prev').click(function(){ $("#slider-id").slick('slickPrev'); }); $('.slider-next').click(function(){ $("#slider-id").slick('slickNext'); }); } });

[@shivamshetty7082]

@@timothyricks This is perfect thanks!

[@Remjbbx]

I am struggling to get a .mp4 url, anyone can help me?

[@Remjbbx]

need help :(

[@taabishshaikh3050]

Is it possible to make slider auto change slide in script?

[@timothyricks]

Yes, slick slider comes with a list of options you can add and one is autoplay. autoplay: true, kenwheeler.github.io/slick/

[@borislutters9438]

is this also possible without cms?

[@timothyricks]

boris lutters Yes, it is. You can still use the same classes and styles. One div to act as the collection list and then a div for each of your items inside it

[@borislutters9438]

@@timothyricks thank you so much it worked! ;)

[@Gitago]

so upsetting that webflow doesnt allow custom code unless you pay for subscription :(