Slick: Synced sliders: removing the same index slide confuses the asNavFor indexes

[ananaszjoe]

When 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

1. have 2 sliders each referring to each other with asNavFor.
2. Have one of the sliders display multiple slides with slidesToShow and be centered with focusOnSelect
3. use the slickRemove method to remove a slide from each slider ( with the same index! )
4. 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 using https://rawgit.com/kenwheeler/slick/master/slick/slick.js
• Did this work before?
  No knowledge of that

[prestopasto]

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.

[ananaszjoe]

Thanks, I appreciate it :)

[JiveDig]

@prestopasto facing a similar issue (i think). You happen to have your code handy that I could take a peak?

[JiveDig]

Got it. Wow, never would have thought to do it that way, thanks.. Working now :)

[denizcakiroglu]

Unfortunately I am also facing this issue, and I don't have any chance to use @prestopasto 's advice since I am trying to create an A/B test for an ecommerce site :( Has anyone have another suggestion or solution for this problem?

I have tried following code, but still had same problem + (it is also breaking thumbnail slider's arrow functions).

I have tried slickRemove first slide and then slickGoTo next slide. Still thumbnail slider is confused.

Thanks for answers!