提问者:小点点

jQuery slick carousel“幻灯片”设置


我使用jQuery slick插件(http://kenwheeler.github.io/slick/)创建了一个轮播。我想使用“幻灯片”设置来指定旋转木马中使用哪些元素。此设置的说明为:

类型:元素
默认值:“”
用作幻灯片的元素查询

我对这个设置的理解是,如果我指定了'div',那么只有div元素将显示在轮播中。我不能让它运转起来。当我创建轮播时,容器中的所有元素都会显示出来。

我创建了一个简单的示例:

<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'
});

我还尝试了“Slide:$('.slickItem')”,但这也不起作用。

https://jsfidle.net/lobfdodo/

在结果面板中,如果单击左/右箭头,您将看到轮播中的所有三个元素(div和p)。我只想把div元素拉到旋转木马中。

有什么建议吗?


共2个答案

匿名用户

我也有类似的问题。技巧是,实例化滑块,然后筛选出您想要显示的内容。

工作小提琴:https://jsfidle.net/m8uxqrt3/

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

匿名用户

我也有类似问题,可以用以下方法解决:

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