slickでスライダー画像部分とテキストの切り離す方法です。
スライダー部分は単純な画像スライドで、その画像に対するテキストなどはフェードインで表示させたい場合など、
表示のさせ方は別々で連動させたい場合などに使えます。
slickGoToで指定したスライドの番号に飛ばすことができます。
これを利用して、例えば3番目に飛ばしたい場合は下記のようになります。
1 |
$('.slider').slick('slickGoTo', 3); |
そこで連動させたい要素の数を「var index = $thumb.index(this);」で取得し
前の記述の「3」のところに「index」を入れて下記のようにします。
1 |
$('.slider').slick('slickGoTo', index); |
■HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<div class="slide-inner"> <div class="slider"> <div class="slider_item"><img src="https://placehold.jp/150x150.png" width="200" ></div> <div class="slider_item"><img src="https://placehold.jp/150x150.png" width="200" ></div> <div class="slider_item"><img src="https://placehold.jp/150x150.png" width="200" ></div> <div class="slider_item"><img src="https://placehold.jp/150x150.png" width="200" ></div> </div> <div class="profile-text"> <div class="thumbnails_text current">テキスト</div> <div class="thumbnails_text">テキスト</div> <div class="thumbnails_text">テキスト</div> <div class="thumbnails_text">テキスト</div> </div> <div class="thumbnails"> <div class="top"> <div class="thumbnails_item current"><img src="https://placehold.jp/150x150.png" alt=""></div> <div class="thumbnails_item"><img src="https://placehold.jp/150x150.png" alt=""></div> <div class="thumbnails_item"><img src="https://placehold.jp/150x150.png" alt=""></div> <div class="thumbnails_item"><img src="https://placehold.jp/150x150.png" alt=""></div> </div> </div> |
■JS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
$(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(); }); |
コメント