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

[people-06]

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

[leggomuhgreggo]

Hey wanted to let you know that I saw this and started organizing all the index issues, but had to break away. Appreciate the issue.

[sleepygarden]

I think I've run into this as a breaking bug - when using slickFilter combined with a separate slick nav (using asNavFor), filtering both leaves the indexes in the nav jumbled, so the nav slick causes the main slick to jump everywhere.

[BenSpace48]

I'm having the same problem when combining filter with asNavFor.

@leggomuhgreggo Did you manage to investigate this?

[leggomuhgreggo]

@BenSpace48 I did! I fought with it for a night, and had to table it. Haven't circled back in a bit.

[BenSpace48]

No problem, as a workaround I manually reset the data-slick-attribute on each change/reInit.

[lkrids]

sounds similar to https://github.com/kenwheeler/slick/pull/2496

[heinsman]

This seems to be an ongoing issue from 2014 till now. slickFilter causes the other functions (slickGoTo, asNavFor, focusOnSelect) to all hit the wrong slick-index. Any ideas for a workaround?

[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!