Create two Slick Sliders, the second one being inside the first one's slide (nested);
First start changing the Nested Slick - you will see that Slick correctly applies "slick-active", "slick-current" and "slick-center" classes to the current slide.
Then start changing the Parent Slick back and forth.
When changing the Parent slider all of the Nested slider's slides "loose activity", i.e. get classes "slick-active", "slick-current" and "slick-center" removed from them.
The problem seems to be in Slick.prototype.setSlideClasses function, at lines 2321 and 2322 - we are essentially searching for all slides in the current Slick instance via find() function, including any nested ones and removing any classes mentioned early.
Changing 2321 to allSlides = _.$slideTrack and 2322 to .children('.slick-slide') seem to fix the problem - now we searching only for slides that are direct children of the current Slick instance.
What's weird is that this (seemingly correct) way of searching for slides is already used in other places in the code, like on lines 1001, 1158, etc.
I've also wanted to note that the "incorrect way" of searching for slides (that causes the nested classes to be removed) is also used in other places in the code, like on lines 1617, 1636, 1640 and more, which may or may not cause some problems with nested sliders too, but I haven't tested it (I think these three lines are from lazy loading functionality).
hasenov
commented
1 year ago
Changing the parent Slick removes classes from nested Slicks. By "changing" I mean swiping, dragging and navigation by arrows/dots.
====================================================================
Demo pen
https://codepen.io/disjointed/pen/QoxWQg (sorry for using CodePen instead of jsFiddle - I've read CONTRIBUTING.markdown after I've already made a pen)
====================================================================
Steps to reproduce the problem
====================================================================
What is the expected behaviour?
Expected a "normal" behaviour, i.e. both Parent and Nested sliders working independently.
====================================================================
What is observed behaviour?
When changing the Parent slider all of the Nested slider's slides "loose activity", i.e. get classes "slick-active", "slick-current" and "slick-center" removed from them.
====================================================================
More Details
====================================================================
Solution
The problem seems to be in
Slick.prototype.setSlideClassesfunction, at lines 2321 and 2322 - we are essentially searching for all slides in the current Slick instance viafind()function, including any nested ones and removing any classes mentioned early.Changing 2321 to
allSlides = _.$slideTrackand 2322 to.children('.slick-slide')seem to fix the problem - now we searching only for slides that are direct children of the current Slick instance.What's weird is that this (seemingly correct) way of searching for slides is already used in other places in the code, like on lines 1001, 1158, etc.
I've also wanted to note that the "incorrect way" of searching for slides (that causes the nested classes to be removed) is also used in other places in the code, like on lines 1617, 1636, 1640 and more, which may or may not cause some problems with nested sliders too, but I haven't tested it (I think these three lines are from lazy loading functionality).
====================================================================
Sorry if I worded this issue somewhat incorrectly, I'm not an native English speaker