如何将`$(this)`传递给Slick.js插件(并创建带循环的多个轮播)

Question

如何传递$(this).find('.option')和$(this).find('.prev_next')对Slick.js？以下产生:Syntax error, unrecognized expression: [object Object]:not(.slick-cloned) in jquery-2.1.0.js:1429

http://jsfiddle.net/frank_o/Lr30ngo1/4/

$('.test').each(function () {
    var option = $(this).find('.option'),
        prev_next = $(this).find('.prev_next');

    $(this).slick({
        slide: option,
        appendArrows: prev_next,
        prevArrow: '<a>Previous</a>',
        nextArrow: '<a>Next</a>'
    });
});

<link href="https://rawgit.com/kenwheeler/slick/master/slick/slick.css" rel="stylesheet"/>
<div class="test">
    <div class="prev_next"></div>
    <div class="option">
        <p>Test</p>
    </div>
    <div class="option">
        <p>Test</p>
    </div>
</div>
<div class="test">
    <div class="prev_next"></div>
    <div class="option">
        <p>Test</p>
    </div>
    <div class="option">
        <p>Test</p>
    </div>
</div>
<div class="test">
    <div class="prev_next"></div>
    <div class="option">
        <p>Test</p>
    </div>
    <div class="option">
        <p>Test</p>
    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/kenwheeler/slick/master/slick/slick.min.js"></script>

如果没有这样的事情,Slick.js会吓坏了,并产生一大堆破一个/下一个环节:http://jsfiddle.net/frank_o/Lr30ngo1/3/

这是只有一个.testdiv 的预期输出:http://jsfiddle.net/frank_o/Lr30ngo1/6/

Answer 1

看起来你不需要预先创建的jQuery的集合,而是只通过选择字符串作为值的slide和appendArrows

您还需要唯一标识prev_next容器以及选项,因为光滑想要选择器,而不是这些参数的元素/集合.

在这里查看固定的jsFiddle:http://jsfiddle.net/81t4pkfa/2/

固定代码如下:(此版本使用您的原始标记,并动态地为每个轮播分配ID以使其"干净")

$('.test').each(function (idx, item) {
   var carouselId = "carousel" + idx;
   this.id = carouselId;
   $(this).slick({
       slide: "#" + carouselId +" .option",
       appendArrows: "#" + carouselId + " .prev_next",
       prevArrow: '<a>Previous</a>',
       nextArrow: '<a>Next</a>'
   });
});

.prev_next a { display: inline-block; width:80px; text-align:center; margin: 2px; border: 0; padding: 4px; background-color: #666; color: #fff; }

<link href="https://rawgit.com/kenwheeler/slick/master/slick/slick.css" rel="stylesheet"/>
<div class="test">
<div class="prev_next"></div>
<div class="option">
    <p>Test</p>
</div>
<div class="option">
    <p>Test</p>
</div>
</div>
<div class="test">
<div class="prev_next"></div>
<div class="option">
    <p>Test</p>
</div>
<div class="option">
    <p>Test</p>
</div>
</div>
<div class="test">
<div class="prev_next"></div>
<div class="option">
    <p>Test</p>
</div>
<div class="option">
    <p>Test</p>
</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/kenwheeler/slick/master/slick/slick.min.js"></script>