Now streaming live

Slick Slider with Webflow CMS?


#1

Hello,
do you see any possibility of using the slick slider with Webflow CMS?
One Slider in the Slick Slider should represent one CMS Item. Can this be done easily?
This is the Slick Slider: http://kenwheeler.github.io/slick/

I would thank you so much for your help.


#2

Yes should be able to use Slick.

Here's the repo: https://github.com/kenwheeler/slick/tree/master/slick

and this is how to use Github: https://forum.webflow.com/t/how-to-embed-files-hosted-on-github/29281?u=samliew

and these are the instructions: http://kenwheeler.github.io/slick/#getting-started


#3

Okay thank you!! I will then take a closer look to Slick today. :slight_smile:


#4

I tired to implement the code today but if have the following problem:

In the initialisation i have to name the class of the div block my slider content is in.
But where can I find the class name of my Dynamic List in Webflow? (Every Dynamic Item should represent one Slide)

Here is the code I'm going to implement in the Footer Section (is this right?):

<!Slick Implementation>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>

<!Slick Initializasion>
<script type="text/javascript">
   	$(document).ready(function(){
      $('.class-name').slick({
        slidesToShow: 6,
  		slidesToScroll: 1,
      });
    });
</script>

Sorry for all questions but it would help me a lot if could use this slider. :S


#5

You do not need jQuery. Webflow already includes one by default.

The selector would be .w-dyn-items


#6

Here is the slick slider implemented with webflow combined with cms lightbox. It is a pretty versatile slider and can be used as a custom slider in webflow that will work with webflow CMS. Thanks @cyberdave for the earlier example.

https://preview.webflow.com/preview/truereflectionmedia-sandbox?preview=220e9c00ea9b62c3fe967cedf843ee11

http://truereflectionmedia-sandbox.webflow.io - published site