QA@IT

jQueryスライダー「slick.jp」のサムネイル表示の画像幅について

9377 PV

こちらの記事を参考にサムネイル付きのスライダーを設置しました。
http://gimmicklog.main.jp/jquery/549/

サムネイルをクリックするとスライドするタイプで、スライダー本体をフリックするとサムネイルも一緒にスライドするようになっています。

サムネイル部分のスライドは無しで4段ずつに表示をしたいのですが、どこをいじれば良いのか分かりません。
(分かりにくいと思うので下の画像を参照くださると幸いです。)
何かヒントをいただけないでしょうか?

ご教授いただける方がいらしましたら宜しくお願い致します。

html

< !-- サムネイル -- >
< ul class="thumb-item-nav" >
< li ><img src=../images/1.png" width="100%" alt="" /></li>
< li ><img src=../images/2.png" width="100%" alt="" /></li>
< li ><img src=../images/3.png" width="100%" alt="" /></li>
< li ><img src=../images/4.png" width="100%" alt="" /></li>
< li ><img src=../images/5.png" width="100%" alt="" /></li>
< li ><img src=../images/6.png" width="100%" alt="" /></li>
< li ><img src=../images/7.png" width="100%" alt="" /></li>
< li ><img src=../images/8.png" width="100%" alt="" /></li>

<!-- スライダー本体 -->
< ul class="thumb-item" >
<li>text</li>
<li>text</li>
<li>text</li>
<li>text</li>
<li>text</li>
<li>text</li>
<li>text</li>
<li>text</li>
< /ul >

Javascript

<!-- サムネイル付きスライダー -->
jQuery('.thumb-item').slick({
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '.thumb-item-nav' //サムネイルのクラス名
});

jQuery('.thumb-item-nav').slick({
infinite: true,
slidesToShow: 8,
slidesToScroll: 1,
arrows: false,
asNavFor: '.thumb-item', //スライダー本体のクラス名
focusOnSelect: true,
});

_____-2.png

「rows:2」を追加

_____-1.png

回答

多忙の為、回答遅くなり申し訳ありません
slickのオプションでRowを2にすればよいのではないでしょうか

   $('.thumb-item-nav').slick({
        infinite: true,
        slidesToShow: 4,
        slidesToScroll: 1,
        arrows: false,
        asNavFor: '.thumb-item', //スライダー本体のクラス名
        focusOnSelect: true,
        rows:2                //←これを追加するだけでは????
    });
編集 履歴 (0)
  • お忙しい中ご回答いただき有難うございます。
    rows:2で試してみたのですが、並び順も縦になってしまいました。
    数字付きのサムネイルにしているので数字も横に並ぶようにしたいです。

    また①②をクリックすると①の内容が③④で2の内容、
    ⑦⑧で④の内容が反映されそれ以上は反映されませんでした。

    大変恐縮ですが、もし分かりましたらもう一度ご教授下さいますようお願い致します。
    画像追加
    -
ウォッチ

この質問への回答やコメントをメールでお知らせします。