質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1263閲覧

jQueryプラグインslick.jsを利用して同一ページに複数サムネイル付きスライダーを設置したい

a1291

総合スコア15

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2018/12/08 06:11

表題の通りなのですが、特定の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); }); });

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

.c-section_slider_block ごとにeachでまわし、$('.c-section_slider_thumbList', this ).on(); とかにすればよいです。

JavaScript

1// 変数nextSlideが定義されていませんが、大体こんな感じ 2$( function() { 3 var $slider = $( '.c-section_slider_block' ); 4 $slider.each( function( index ) { 5 var $_t = $( this ); 6 $_t.find( '.c-section_slider' ).slick({ 7 arrows: true, 8 centerMode: true 9 } ).on('beforeChange', function(event, slick, currentSlide, nextSlide) { 10 var current_section_slider = '.' + $( this ).attr( 'data-section-name' ); 11 console.log(current_section_slider); 12 $( '.c-section_slider_thumbList, .c-section_slider_list' ,$_t ).removeClass( 'active' ); 13 $( '.c-section_slider_thumbList', $_t ).eq( nextSlide ).addClass( 'active' ); 14 } ); 15 16 $( '.c-section_slider_thumbList', $_t ).on('click', function() { 17 var index = $( '.c-section_slider_thumbList', $_t ).index( this ); 18 $( '.c-section_slider', $_t ).slick( 'slickGoTo', index ); 19 } ); 20 } ); 21} ); // 未検証

投稿2018/12/08 06:24

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

a1291

2018/12/08 06:50

ありがとうござます!無事解決しました!! ちなみに.on('beforeChange', function(event, slick, currentSlide, nextSlide) {・・・ともう一つ別に、 .on('afterChange', function(slick, currentSlide){という記載があるのですがこちらを付けたい場合の記載方法お判りになりますでしょうか?
kei344

2018/12/08 07:04

} ); ↓ } ).on('afterChange', function(slick, currentSlide) {} ); という感じにすればよいです。
a1291

2018/12/08 07:23

できました!ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問