jQuery slick carousel "slide" setting

Question

I have created a carousel using the jQuery slick plugin (http://kenwheeler.github.io/slick/). I would like to use the "slide" setting to specify which elements are used in the carousel. The description of this setting is:

Type:element
Default: ''
Element query to use as slide

My understanding of this setting is if I specify 'div', then only div elements will be displayed in the carousel. I cannot get this to work. When I create the carousel, all elements in the container are displayed.

I created a simple example:

<div class="slickContainer">
    <div class="slickItem">
        Item 1
    </div>
    <div class="slickItem">
        Item 2
    </div>
    <p>
        Shouldn't be an item.
    </p>
</div>

$(".slickContainer").slick({
      slide: 'div'
});

I also tried "slide: $('.slickItem')", but this didn't work either.

https://jsfiddle.net/Lobfdodo/

In the Result panel, if you click the left / right arrows you will see all three elements (div and p) in the carousel. I want only the div elements to be pulled into the carousel.

Any suggestions?

Sheffield

Answer 1

I had a similar issue. The trick was, instantiate the slider, then filter out what you WANT to display.

Working Fiddle: https://jsfiddle.net/m8uxqrt3/

$(".slickContainer").slick().slick('slickFilter', '.slickItem');

Gild

Slick Slider Working Example code2night.com/Blog/MyBlog/Slick-Slider – Demulcent

Answer 2

I had similar issue and could solve using following method:

$(".slickContainer").slick({
    slide: 'div',
    rows: 0
});

Roofing

Slick Slider Working Example in Asp.net MVC and Asp.net Web Forms code2night.com/Blog/MyBlog/Slick-Slider – Demulcent