slick sliderを1ページ内に複数設置したいです（設置数が変わる場合）

###前提・実現したいこと
slick slider（http://kenwheeler.github.io/slick/）で、
サムネイルとスライドショーが連動したものを、作成しました。
これを、1ページ内に複数個設置したいのですが、その場合にどのように対処してよいのか悩んでおります。

<!--「.slider-for」がスライダーで、「.slider-nav」がサムネイルです。-->

<ul class="slider-for">
 <li>画像パス1</li>
 <li>画像パス2</li>
 <li>画像パス3</li>
</ul>

<ul class="slider-nav">
 <li>画像パス1</li>
 <li>画像パス2</li>
 <li>画像パス3</li>
</ul>

//スライダー部分
$('.slider-for').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: false,
  fade: true,
  asNavFor: '.slider-nav'
});
//サムネール
$('.slider-nav').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  asNavFor: '.slider-for',
  dots: true,
  centerMode: true,
  focusOnSelect: true
});

設置個数が決まっている場合には、
「.slider-for1」に対して「.slider-nav1」、
「.slider-for2」に対して「.slider-nav2」、、、、
というふうに増やしていけば対応できるのですが、
設置個数が決まってない場合に、どのようにしたらよいのか分かりません。
よろしくお願いします。

###発生している問題・エラーメッセージ

エラーメッセージ

###該当のソースコード

ここにご自身が実行したソースコードを書いてください

###試したこと
課題に対してアプローチしたことを記載してください

###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報

行動規範の内容に同意します

回答2件

こんな感じとかどうでしょう。

HTML
1<div class="slider-wrap">
2	<ul class="slider-for">
3		<li>画像パス1</li>
4		<li>画像パス2</li>
5		<li>画像パス3</li>
6	</ul>
7	<ul class="slider-nav">
8		<li>画像パス1</li>
9		<li>画像パス2</li>
10		<li>画像パス3</li>
11	</ul>
12</div>
13<div class="slider-wrap">
14	<ul class="slider-for">
15		<li>画像パス1</li>
16		<li>画像パス2</li>
17		<li>画像パス3</li>
18	</ul>
19	<ul class="slider-nav">
20		<li>画像パス1</li>
21		<li>画像パス2</li>
22		<li>画像パス3</li>
23	</ul>
24</div>

JavaScript
1$( '.slider-wrap' ).each( function( i ) {
2	var $_t = $( this );
3	
4	//スライダー部分
5	$_t.find( '.slider-for' ).addClass( '.slider-for' + i ).slick( {
6		  slidesToShow: 1
7		, slidesToScroll: 1
8		, arrows: false
9		, fade: true
10		, asNavFor: '.slider-nav' + i
11	} );
12	//サムネール
13	$_t.find( '.slider-nav' ).addClass( '.slider-nav' + i ).slick( {
14		  slidesToShow: 3
15		, slidesToScroll: 1
16		, asNavFor: '.slider-for' + i
17		, dots: true
18		, centerMode: true
19		, focusOnSelect: true
20	} );
21} ); // 未テスト

【.each() | jQuery API Documentation】
https://api.jquery.com/each/

投稿2017/05/03 08:43

kei344

総合スコア69583

miw_arock

2017/05/04 03:29

kei344さん、早速のご回答をありがとうございました。試してみて、またご報告させていただきますm(_ _)m

miw_arock

2017/05/10 09:09

返信おそくなり申し訳ありません！試したところ、うまくいきました！ありがとうございました。 .addClass( )の中が、'slider-for' + i で、カンマが不要でした。

行動規範の内容に同意します

自己解決

<div class="slider-wrap">
    <ul class="slider-for">
        <li>画像パス1</li>
        <li>画像パス2</li>
        <li>画像パス3</li>
    </ul>
    <ul class="slider-nav">
        <li>画像パス1</li>
        <li>画像パス2</li>
        <li>画像パス3</li>
    </ul>
</div>
<div class="slider-wrap">
    <ul class="slider-for">
        <li>画像パス1</li>
        <li>画像パス2</li>
        <li>画像パス3</li>
    </ul>
    <ul class="slider-nav">
        <li>画像パス1</li>
        <li>画像パス2</li>
        <li>画像パス3</li>
    </ul>
</div>

$( '.slider-wrap' ).each( function( i ) {
    var $_t = $( this );

    //スライダー部分
    $_t.find( '.slider-for' ).addClass( 'slider-for' + i ).slick( {
          slidesToShow: 1
        , slidesToScroll: 1
        , arrows: false
        , fade: true
        , asNavFor: '.slider-nav' + i
    } );
    //サムネール
    $_t.find( '.slider-nav' ).addClass( 'slider-nav' + i ).slick( {
          slidesToShow: 3
        , slidesToScroll: 1
        , asNavFor: '.slider-for' + i
        , dots: true
        , centerMode: true
        , focusOnSelect: true
    } );
} );

投稿2017/05/10 09:09

miw_arock

総合スコア10