Synced sliders: removing the same index slide confuses the asNavFor indexes
See original GitHub issueWhen using two sliders in the slider syncing setup where you have a main slider on top and a navigation slider underneath, and you use slickRemove
to remove the same 1 slide with the same index from both of the sliders, then the navigation slider will control the sliders with the wrong index. i.e.: when you remove slide #2 from both, then slick slide #3, both slider will slide to #4 instead.
[ https://fiddle.jshell.net/ananaszjoe/ruky7kqd/ ]
use this jsfiddle to reproduce your bug: http://jsfiddle.net/simeydotme/fmo50w7n/ we will likely close your issue without it.
Steps to reproduce the problem
- have 2 sliders each referring to each other with
asNavFor
. - Have one of the sliders display multiple slides with
slidesToShow
and be centered withfocusOnSelect
- use the
slickRemove
method to remove a slide from each slider ( with the same index! ) - click one of the slides in the slider that displays multiple slides and -> The sliders will slide to not the appropriate slide, but the next ones from that.
What is the expected behaviour?
Ideally when removing a slide from a slider that has the asNavFor
set, the affected sldiers would refresh and clicking a slide would focus that one and not the next one from it.
What is observed behaviour?
When you remove the same index slide from the two sliders, and slick on a slide to focus both slides to that index, the sliders will slide to the index that’s the next from the one that was clicked. …
More Details
- Which browsers/versions does it happen on? I tested on the latest Chrome
- Which jQuery/Slick version are you using?
Discovered the issue on
1.6.0
, reproduced it in jsfiddle usinghttps://rawgit.com/kenwheeler/slick/master/slick/slick.js
- Did this work before? No knowledge of that
Issue Analytics
- State:
- Created 7 years ago
- Comments:6
Top GitHub Comments
I was experiencing the same issue. I’m using two synced sliders for images on a product detail page for an ecommerce site. When changing options on a product I was adding all the new slides via slickAdd to the end of the slider and then removing all the old slides with a loop calling slickRemove and index 0 repeated for the number of slides I was removing.
I reversed the order and removed the old slides first, effectively emptying the sliders, and then added all the new slides. asNavFor worked correctly after that.
I’m sure the issue exists for your case of removing a single element from the middle of the list. I’m just confirming that someone else was seeing the same problem since your issue had been here so long with no other comments.
Got it. Wow, never would have thought to do it that way, thanks… Working now 😃