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

/

$('.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=".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=".1.1/jquery.min.js"></script>
<script src=".min.js"></script>

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/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./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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit./kenwheeler/slick/master/slick/slick.min.js"></script>

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

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

• javascript
• jquery
• carousel

Share Improve this question Follow edited Oct 21, 2014 at 20:23 nothingisnecessary 6,2533737 silver badges6363 bronze badges asked Oct 21, 2014 at 16:37 Mark BoulderMark Boulder 14.3k1313 gold badges5353 silver badges8181 bronze badges 3

• 1 Looks like it should work. Where is the code mentioned it the error? – isherwood Commented Oct 21, 2014 at 16:57
• I don't know, all I see is a reference to jquery-2.1.0.js:1429. – Mark Boulder Commented Oct 21, 2014 at 17:37
• It's still broken: jsfiddle/frank_o/Lr30ngo1/5 -- here's the expected output with only one .test div: jsfiddle/frank_o/Lr30ngo1/6 – Mark Boulder Commented Oct 21, 2014 at 18:22

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 12

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

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.

See the fixed jsFiddle here: http://jsfiddle/81t4pkfa/2/

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./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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit./kenwheeler/slick/master/slick/slick.min.js"></script>