。jQueryプラグイン slick.jsでサムネイル、またはスリックをすると背景画像が出るように設定したい

Question

表題の通りですが、HTML全て同じクラス名で、同一ページにあります。
一つ目のスライダーはできているのですが、二つ目以降からの操作が不明です。
よろしくお願いします。

また、サムネイルをクリックする時と、スワイプする時はそれぞれ背景操作のjsを書く必要があるのでしょうか。
そのことについても教えていただければと思います。

以下のHTMLが複数個つくと考えます。

<section　class="c-section">
        <div class="c-section_slider_block">
          <div class="c-section_sliderWrap">
            <ul class="c-section_slider">
              <li class="c-section_slider_list"><img src="./assets/images/slider_1.jpg" alt="スライダー1"></li>
              <li class="c-section_slider_list"><img src="./assets/images/slider_2.jpg" alt="スライダー2"></li>
              <li class="c-section_slider_list"><img src="./assets/images/slider_3.jpg" alt="スライダー3"></li>
              <li class="c-section_slider_list"><img src="./assets/images/slider_4.jpg" alt="スライダー4"></li>
              <li class="c-section_slider_list"><img src="./assets/images/slider_5.jpg" alt="スライダー5"></li>
            </ul>
            <ul class="c-section_slider_thumb">
              <li class="c-section_slider_thumbList"><img src="./assets/images/slider_1.jpg" alt="スライダー1"></li>
              <li class="c-section_slider_thumbList"><img src="./assets/images/slider_2.jpg" alt="スライダー2"></li>
              <li class="c-section_slider_thumbList"><img src="./assets/images/slider_3.jpg" alt="スライダー3"></li>
              <li class="c-section_slider_thumbList"><img src="./assets/images/slider_4.jpg" alt="スライダー4"></li>
              <li class="c-section_slider_thumbList"><img src="./assets/images/slider_5.jpg" alt="スライダー5"></li>
            </ul>
          </div>
        </div>
      </section>


.c-section_slider_block {
  position: relative;
  background: no-repeat;
  background-size: cover;
  z-index: 0;
  overflow: hidden;
}

$(function() {

  var $sliderBlock = $('.c-section_slider_block');
  $sliderBlock.each(function(index){
    var $this = $(this);
    console.log($this)
    $this.find('.c-section_slider').slick({
      arrows: true,
      centerMode: true
    })
    .on('beforeChange', function(event, slick, currentSlide, nextSlide) {
      $('.c-section_slider_thumbList, .c-section_slider_list',$this).removeClass('active');
      $('.c-section_slider_thumbList', $this).eq(nextSlide).addClass('active');
    });
    $('.c-section_slider_thumbList', $this).on('click', function() {
      var index = $('.c-section_slider_thumbList', $this).index(this);
      $('.c-section_slider', $this).slick('slickGoTo', index);
    });
    }).on('afterChange', function(slick, currentSlide){

		//スライダーの背景画像取得
			var img = $('.slick-current').children('img').attr('src');
			console.log(img);
			var background = 'url('+ img +')';
			console.log(background);
			$('.c-section_slider_block').css('background-image',background);

		});

  });

Comments

[Lhankor_Mhy]

『サムネイル、またはスリックをすると背景画像が出る』について詳しくお願いします。「スリック」とは「フリック」の誤記ですか？

[a1291]

そうですね、失礼しました。

[Lhankor_Mhy]

『サムネイル、またはフリックをする』というのは、どういう状況でしょう。「サムネイルする」という用法を存じ上げないため、別の言葉で補足いただけますか？

[a1291]

サムネイル画像をクリックする時と、スライダーをフリックするということです。

[a1291]

サムネイル画像をクリックする時と、スライダーをフリックするということです。

[Lhankor_Mhy]

なるほど。ここでいう「背景画像」とは、何の背景画像ですか？　slickのデモを見ましたが、背景画像は特段設定されていないようでした。

[a1291]

メイン画像につくclassの.slick-currentから画像のURLを抽出しjsのcssでback-groundに設定しています。

[Lhankor_Mhy]

『操作が不明』とは、動作しない、という意味合いでしょうか？　具体的にはどのような現象が起きていますか？

Answer 1

$('.slick-current')はスライダーの数だけ存在しますので、$('.slick-current').children('img').attr('src')は常に一つ目の画像を指します。
$('.slick-current')のコンテキストに$thisを用いるといいかと思いますが、afterChangeのイベント処理がeachメソッドの外に出ているため、$thisが参照できません。

解決方法としては、afterChangeのイベント処理をeachメソッドの中に入れ、コンテキストに$thisを用いることです。ただし、afterChangeのイベント処理がeachメソッドの外に出ていることに意味があるのであれば、他の部分への影響に注意してください。