Slick js 上下の連動表示

slick.js

slick メモ

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

スクリーンショット 2016-10-26 18.13.02

 

この↑の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の値もほぼ使えるかと思うのでちょっと自分でアレンジする事も出来るのでいい感じに使えるのでオススメです!

関連記事

  1. Cake.php レイアウト変更についてのメモ

  2. google 日本語入力はかしこい!

  3. 国産ECサイトオープンソース エレコマ

  4. Firefox 4

  5. AFFINITY DESIGNERを使ってみた!

  6. WordPressの利点