Slick: Slick unable to deal with multiple sliders

[frankie-loves-jesus]

If I have more than one slider, Slick.js will get confused and produce a whole bunch of broken prev/next links: http://jsfiddle.net/frank_o/Lr30ngo1/3/

I tried doing like $(this).find('.option') and $(this).find('.prev_next') but that gave me Syntax error, unrecognized expression: [object Object]:not(.slick-cloned) in jquery-2.1.0.js:1429: http://jsfiddle.net/frank_o/Lr30ngo1/4/

Anybody have any ideas?

[kenwheeler]

Technically not a bug. You should have a more specific selector in your appendArrows option.

[frankie-loves-jesus]

But actually .test is a Rails partial that's repeated multiple times, so that's not really feasible.

You can see a dirty fix here: http://stackoverflow.com/a/26493655/1037526

[kenwheeler]

I'm not in the business of dirty fixes lol. The appendArrows option takes a selector that should be one single external element that your arrows get appended to.

Why not wrap each slider/arrow combo in a div? Or if that's a partial, I'm assuming it's an iterated loop, append an index to the class name and selector?

[robertjwhitney]

Wait, that dirty fix seems poorly implemented, but still a reasonable idea. Why can't the script be responsible for this? Just attach a unique data attribute and then append based on that by default?

[JohneyCodeUp]

Here is how I solve it. Just reference "this" in each loop, and use it as selector for next and prev btns. Ofc, selector depend on you HTML structure. So here I will post just JS.

$('.slider').each(function(){
var slickInduvidual = $(this);
slickInduvidual.slick({
nextArrow: slickInduvidual.next().find('.right'),
prevArrow: slickInduvidual.next().find('.left')
});
})

[DanielRuf]

@JohneyCodeUp thanks, this seems to fix it. I hoped it would work with multiple sliders which use the same markup.

[iamleighm]

@JohneyCodeUp Thanks. This solved it for me.

[saxsax1995]

@JohneyCodeUp solution make the prevArrow and nextArrow doesn't work well, it only work for the second slider, the first one doesn't. When i click the first slide arrow, the second slide move :'0.

[chancer4]

@saxsax1995 I had to tweak it since my arrows were siblings but not the next sibling. [$('.slick').each(function(){
var slickIndividual = $(this);
slickIndividual.slick({
dots: true,
arrows: true,
infinite: true,
fade: true,
appendDots: slickIndividual.next('.slick-pager'),
nextArrow: slickIndividual.siblings('.next'),
prevArrow: slickIndividual.siblings('.prev')
});
})]