如何将$（this）传递给Slick.js插件（并使用循环创建多个轮播）

Mark Boulder 发表于 Dev

马克·博尔德

如何传递$(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就会发疯，并产生一堆损坏的prev / next链接：http : //jsfiddle.net/frank_o/Lr30ngo1/3/

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

没必要

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

您还需要唯一地标识prev_next容器和选项，因为slick需要选择器，而不是这些参数的元素/集合。

请在此处查看固定的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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。