jQuery 漂亮的轮播 "slide" 设置

Question

我使用 jQuery slick 插件 (http://kenwheeler.github.io/slick/) 创建了一个旋转木马。我想使用 "slide" 设置来指定轮播中使用的元素。此设置的说明是：

类型：元素
默认值：''
用作幻灯片的元素查询

我对这个设置的理解是，如果我指定'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://jsfiddle.net/Lobfdodo/

在“结果”面板中，如果单击左/右箭头，您将在轮播中看到所有三个元素（div 和 p）。我只想将 div 个元素拉入轮播。

有什么建议吗？

Answer 1

我遇到了类似的问题。诀窍是，实例化滑块，然后过滤出您想要显示的内容。

工作Fiddle：https://jsfiddle.net/m8uxqrt3/

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

Answer 2

我有类似的问题，可以使用以下方法解决：

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

jQuery 漂亮的轮播 "slide" 设置

jQuery slick carousel "slide" setting

jquery

slick.js