Slides indexes not re-counting after filtering. Suggestion / solution

Hello!

I doing custom slides preview for prev/next slides and found, that after filtering script not re-counting indexes for slides (I printed current and next indexes on “beforeChange” and found, that they are different with indexes from “data-slick-index”) So my fix was in slick refreshing on ‘reInit’ (gallery.slick(‘refresh’))

Maybe this solution could help someone or you will add refresh in re-init.

[ paste your jsfiddle link here ]

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. Filter slides
2. check console.log indexes
3. check real indexes from data-slick-index

What is the expected behaviour?

same indexes for right dom manipulating

What is observed behaviour?

different indexes printed

More Details

• Chrome 52.0.2743.116 (64-bit)
• Version: 1.6.0
• who know

[Davidkulpe]

I hit that issue while using Slick as a dynamic slider for some purpose. adding&removing slides (complex HTML elements) got Slick to lose very fast the track of slides to solve it I’m reindexing all relevant slides after a removal using this simple code

                var indx = 0;
                $.each($(".vndrslctditem").not(".slick-cloned"), function (t, v) {
                    $(v).attr("data-slick-index", indx);
                    indx++;
                });

[realbaker]

@Davidkulpe your solution seems like what I’ve been looking for/wracking my brain over. Here’s what I’m dealing with. I’d love your help on where to place your code.

I have something setup on a product detail page where there is a Slick slider for the large product images (‘.slider-for’ and then a Slick slider for thumbnail images (‘.slider-nav’)that act as the navigation for the main image. On the slider-nav Slick, I have asNavFor: ‘.slider-for’ and focusOnSelect: true, which both seem to cause issues with the indexing after slickFilter is set. So a customer would choose a product color, and the main and thumbs would change to only be the ones with the corresponding color class. As others have noted, after clicking around, Slick gets confused with the indexing and doesn’t highlight the selected thumbnail and/or doesn’t show the corresponding large product image.

I’m setting slickUnfilter on both the main image slider and the thumbnail slider, then setting slickFilter, ‘.color-class’ to show only images of the selected color. Can you give your thoughts on where I’d place your code/something similar to your code to reset the index on both of those sliders? Any insight would be appreciated. Thanks!