表題の通りなのですが、特定のidなど付けずに設置してeachなどの繰り返し処理等で設定したいと思っております。
メインのスライダーはできたのですが、サムネイルの表記がうまくいきません。
どなたかお判りになる方よろしくお願いします。
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> </div> <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> </section> $(function() { var $slider = $('.c-section_slider'); $slider.each(function(index){ $slider.eq(index).slick({ arrows: true, centerMode: true }); }); $('.c-section_slider').on('beforeChange', function (event, slick, currentSlide, nextSlide) { var current_section_slider = '.' + $(this).attr('data-section-name'); console.log(current_section_slider); $('.c-section_slider_thumbList,.c-section_slider_list').removeClass('active'); $('.c-section_slider_thumbList').eq(nextSlide).addClass('active'); }); $('.c-section_slider_thumbList').on('click', function() { var index = $('.c-section_slider_thumbList').index(this); $('.c-section_slider').slick('slickGoTo', index); }); });
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/12/08 06:50
2018/12/08 07:04
2018/12/08 07:23