【JavaScript】「slick slick-active サムネイル asNavFor」でお困りの方へ。

slickで「Slider Syncing」のslick-activeクラスが全てにつくバグを解消する

こちらの記事が参考になりましたが、サムネイル部分(.slider-nav)のfocusOnSelectがtrueで、かつ.slider-navをダブルクリックすると、全てslick-activeがついてしまいました。惜しいです。そもそもこの条件の発生条件ですが、centerModeを.slide_image側をtrue, .slider-nav側をfalseにしていたら起きるようですね。

とりあえず、slide-nav側のfocusOnSelectはfalseにし独自対応する形にします。

/**
 * 不具合対応@slick 1.5.8
 * slider-navのfocusOnSelectをtrue(active付く感じにする)かつ、
 * centerModeをfalseにすると、slider-navが全てactiveになるバグがあるので
 * focusOnSelectを使わず自前で対応する
 */
function slickNavActive(key) {
    //全てのactiveを削除したのち、key番目の要素をactiveにする。
    $('.slick-nav .slick-slide').removeClass('slick-active');
    $('.slick-nav .slick-slide').eq(key).addClass('slick-active');
}
$('.slide_image').on('beforeChange', function (event, slick, currentSlide, nextSlide) {
    slickNavActive(nextSlide);
});
$('.slider-nav .slick-slide').on('click', function (event) {
    $('.slide_image').slick('slickGoTo', $(this).data('slick-index'));
});

//最初にactiveにするインデックス番号を指定。
//※最初にこれをやらないと全てactiveになってしまうので
slickNavActive(0);