如何将`$（this）`传递给Slick.js插件（并创建带循环的多个轮播） [英] How to pass `$(this)` to Slick.js plugin (and create multiple carousels with a loop)

问题描述

如何传递 $（this）.find（'。option'）和 $（this）.find（'。prev_next' ）来 Slick.js ？以下产生：语法错误，无法识别的表达式：[object Object]：not（.slick-cloned）在jquery-2.1.0.js中：1429

How do I pass $(this).find('.option') and $(this).find('.prev_next') to Slick.js? The following produces: 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/

Without something like this, Slick.js would freak out and produce a whole bunch of broken prev/next links: http://jsfiddle.net/frank_o/Lr30ngo1/3/

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

Here is the expected output with only one .test div: http://jsfiddle.net/frank_o/Lr30ngo1/6/

推荐答案

看起来像你不需要预先创建jQuery集合，而只需将选择器字符串作为幻灯片和 appendArrows

Looks like you don't need to pre-create the jQuery collections but instead just pass the selector strings as the values for the slide and appendArrows

您还需要唯一标识prev_next容器和选项s因为光滑想要一个选择器，而不是那些参数的元素/集合。

You also need to uniquely identify the prev_next container and the options some how since slick wants a selector, and not an element/collection for those parameters.

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

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

Fixed code follows: (this version uses your original markup, and dynamically assigns ID to each carousel to keep it "clean")

$('.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>

这篇关于如何将`$（this）`传递给Slick.js插件（并创建带循环的多个轮播）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！