slickでスライダー画像部分とテキストの切り離し

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();
});