Slick Slider in Webflow

Hey all,

I’m trying to add Slick Slider to a Webflow project. However, Slick Slider requires you to add a folder to your project which contains several different files that are required to allow the slick slider to function.

How can we upload a folder that contains other necessary files like ruby files, js files, CSS files, and SCSS files? (these are all file types in the slick slider file)

These are one of the instructions on slick slider website:

“Move the /slick folder into your project”

Link to slick slider website:

Hi, cou can’t Webflow do not support adding a folder with thet kind of files. You need to find CDN soulution where it,s hosted

Here is one CDN you can use slick-carousel - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

1 Like

Anyone got this to work? It will be another good way of implementing a custom CMS slider that will be easier to use than the cycle2js.

I’m trying to implement it on this page.

https://preview.webflow.com/preview/trm-assets-copy?utm_source=trm-assets-copy&preview=e92f1bf501de2c51af5da71e6d585013 page is Slick-slider

https://trm-assets-copy.webflow.io/slick-slider

But on inspection get
Unchecked runtime.lastError: The message port closed before a response was received.
Not sure if this is something being blocked on the webflow end. Maybe it is a super easy fix.

Owl carousel works to a degree but the simplicity of slick slider vs owl looks to be an easier webflow solution. I just can’t seem to get it to initialize the script.

thanks
Jeremy

Here is a Read-Only project with a slick slider.

https://preview.webflow.com/preview/slick-f6d8cb?utm_source=slick-f6d8cb&preview=91386c5e995fd12401f6ade470b3be97

what’s the live link? To see it in action.

It looks like a slick slider :slight_smile: I created this to help a forum member out who was struggling with setting it up (custom code). Zero effort in design.

https://slick-f6d8cb.webflow.io/

2 Likes

perfect thanks, obviously there was something I had copied wrong because I copied your custom code into head and body and now it works tied to the cms. Which is ultimately what I was wanting it for it is a much easier implementation for a custom slider than cycle2js. Now I can play around with the options

thanks

can you make this clone-able?

Thanks

Hey @webdev thanks for the solution. One question, why are all of the images appearing on page load or refresh? Loom | Free Screen & Video Recording Software | Loom

@jensvahle - I could look into it but I don’t recommend using slick slider (project is stale). Below are some alternatives:

  1. Owl Carousel 2 9 Looks DEAD See Tiny Slider 2 below
  2. Glide
  3. Tiny Slider 2
  4. Swiper.js

@jensvahle - With the slick demo you could just set the embed to hidden and then add an IX2 interaction on page loaded to display block. That would address the unstyled flash of content (stacked images). Example: Slick

does anyone know how to add a follow finger to a slick slider?

[Ceremony Coffee Roasters: Taste by Color]

I came across this website and the slider is available on mobile and it just looks fantastic