Clever Geek Handbook

JQuery slick carousel "slide" customization

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

Type: Element
Default:
Request an element to use as a slide

My understanding of this setting is that 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 the items 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 that didn't work either.

https://jsfiddle.net/Lobfdodo/

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

Any suggestions?

+4


source to share


2 answers


I had a similar problem. The trick is to instantiate the slider and then filter out what you want to display.

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



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


source


I had a similar problem and could solve it in the following way:



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


source






More articles:


All Articles