slickでスライダー画像部分とテキストの切り離す方法です。
スライダー部分は単純な画像スライドで、その画像に対するテキストなどはフェードインで表示させたい場合など、
表示のさせ方は別々で連動させたい場合などに使えます。
slickGoToで指定したスライドの番号に飛ばすことができます。
これを利用して、例えば3番目に飛ばしたい場合は下記のようになります。
$('.slider').slick('slickGoTo', 3);
そこで連動させたい要素の数を「var index = $thumb.index(this);」で取得し
前の記述の「3」のところに「index」を入れて下記のようにします。
$('.slider').slick('slickGoTo', index);
■HTML
■JS
$(function(){ var slider = function() { var $slider = $('.slider'); if ($slider.length < 1) { return; } var $text = $('.thumbnails_text'); var $thumb = $('.thumbnails_photo'); //オプション $slider.slick({ arrows: true, fade:true, speed: 800, }); $thumb.on('click', function(e){ e.preventDefault(); var index = $thumb.index(this); $slider.slick('slickGoTo', index); }); $slider.on('beforeChange', function(event, slick, currentSlide, nextSlide){ var currentClass = 'current'; $thumb.removeClass(currentClass) .eq(nextSlide).addClass(currentClass); $text.removeClass(currentClass) .eq(nextSlide).addClass(currentClass); }); }; slider(); });