Slick　js　上下の連動表示

slick メモ

スリックの使い方は前回の記事に描いたので今回は使い方の一部をメモします。
Slider Syncingの使い方

 

この↑のjsの組み込み方です。

js記述はサイトの方にある書き方でおkです。

$(‘.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-forは.slider-navのdivと連携しているのでhtmlの書き方も普通に使う時とはちょっとだけ変わっています。

<div class=”slider-for”>

<div>画像</div>
<div>画像</div>
<div>画像</div>
<div>画像</div>

</div>

<div class=”slider-nav”>

<div>画像</div>
<div>画像</div>
<div>画像</div>
<div>画像</div>

</div>

こんな感じに記述します。そうすると両方連携してて変えた方に両方変更するようになります。
Slickの値もほぼ使えるかと思うのでちょっと自分でアレンジする事も出来るのでいい感じに使えるのでオススメです！