【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);