focusOnSelect doesn't work when a filter is applied to synced sliders

A very simple issue which could be simulated like this:

Set up

• 2 synced sliders
• slider#2 set up:
  • slidesToShow > 1 (e.g. 3)
  • focusOnSelect = true
• a filter which filters both sliders (e.g. ‘:even’)

Expected and Actual behavior

Once the filter has been applied to both sliders, clicking on slider-nav items should navigate to the same items in slider-for. Instead, Slick navigates to a wrong item, in some crazy manner.

Test Case

Try clicking on slide3 text => and then on slide7 in this jsFiddle test case.

Bug Explanation

Slide attribute data-slick-index, which is used for navigation, cannot be relied on once a filter has been applied. Natural order of slides should be used instead. Fix is to follow…

[tsymbal]

My variant of solution, based on previous “codepens”.

.gallery_slider - main slider .gallery_thumbs - thumbs slider .filternav ul li a - filter links (albums), their href=“#id” (id = album id), all slides (in both sliders) have id as “class” value. So, each slide can be in several albums. For example, clicking on link with href=“#dir1” will filter all slides (in both sliders), that have class=“… dir1 …”

    $('.gallery_slider').slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        arrows: true,
        fade: false,
        infinite: false,
        asNavFor: '.gallery_thumbs'
    });
    $('.gallery_thumbs').slick({
        slidesToShow: 4,
        slidesToScroll: 1,
        infinite: false,
        asNavFor: '.gallery_slider',
        dots: false,
        centerMode: false,
        focusOnSelect: true,
        arrows: true,
    });
    $(document).on('click', '.filternav ul li a', function(a){
        a.preventDefault();
        $(".filternav ul li").removeClass("active");
        $(this).parents("li").addClass("active");
        href = $(this).attr("href").replace("#","");
        console.log(href);
        var $slider = $('.gallery_slider, .gallery_thumbs');
        $slider.slick('slickUnfilter').slick('slickFilter','.'+href);
        $slider.each(function(index,slide){
            s_id = 0;
            //console.log(index,slide,s_id);
            $(".slick-slide:not(.slick-cloned)",slide).each(function(s_index,s_slide) {
                $(this).attr("data-slick-index",s_id)
                s_id = s_id+1;
                if (index==0) {
                    if ($(this).hasClass("slick-current")) {
                        active_index = s_id;
                    }
                }
                if (index==1) {
                    if (s_id==active_index) {
                        $(this).addClass("slick-current");
                    } else {
                        $(this).removeClass("slick-current");
                    }
                }
            })
        })
        $slider.slick('slickGoTo',0,true);
    });

[Colir]

base on the solution of @LucasFlicky , here is a working version without plugin’s core modifications http://codepen.io/Colir/pen/PWQqEE