Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Slick unable to deal with multiple sliders

See original GitHub issue

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?

Issue Analytics

State:
Created 9 years ago
Comments:9 (2 by maintainers)

Top GitHub Comments

39reactions

JohneyCodeUpcommented, Dec 1, 2016

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’) }); })

2reactions

chancer4commented, Oct 16, 2019

@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’) }); })]