slickはsliderレイアウトを構築する際によく使用するレイアウトですが、複数行の実装は初めてだったので、使用したオプションを忘備録として残します。
サンプルコードはそのままコピペで動作しますが、レイアウトは各々調整してください。
■ 関連記事 : JavaScriptの基礎習得に役立つ技術書【おすすめ3選】
■ HTML
<div class="inner">
<div class="slider_wrap">
<div class="slider_item" data-slide-id="1">
<img src="https://placehold.jp/600x400.png" alt="ダミー画像" width="100%">
</div>
<div class="slider_item" data-slide-id="2">
<img src="https://placehold.jp/600x400.png" alt="ダミー画像" width="100%">
</div>
<div class="slider_item" data-slide-id="3">
<img src="https://placehold.jp/600x400.png" alt="ダミー画像" width="100%">
</div>
<div class="slider_item" data-slide-id="4">
<img src="https://placehold.jp/600x400.png" alt="ダミー画像" width="100%">
</div>
<div class="slider_item" data-slide-id="5">
<img src="https://placehold.jp/600x400.png" alt="ダミー画像" width="100%">
</div>
<div class="slider_item" data-slide-id="6">
<img src="https://placehold.jp/600x400.png" alt="ダミー画像" width="100%">
</div>
<div class="slider_item" data-slide-id="7">
<img src="https://placehold.jp/600x400.png" alt="ダミー画像" width="100%">
</div>
<div class="slider_item" data-slide-id="8">
<img src="https://placehold.jp/600x400.png" alt="ダミー画像" width="100%">
</div>
<div class="slider_item" data-slide-id="9">
<img src="https://placehold.jp/600x400.png" alt="ダミー画像" width="100%">
</div>
<div class="slider_item" data-slide-id="10">
<img src="https://placehold.jp/600x400.png" alt="ダミー画像" width="100%">
</div>
<div class="slider_item" data-slide-id="11">
<img src="https://placehold.jp/600x400.png" alt="ダミー画像" width="100%">
</div>
<div class="slider_item" data-slide-id="12">
<img src="https://placehold.jp/600x400.png" alt="ダミー画像" width="100%">
</div>
</div>
</div>
■ JavaScript
$('.slider_wrap').slick({
prevArrow: '<button class="slide-arrow prev-arrow">PREV</button>',
nextArrow: '<button class="slide-arrow next-arrow">NEXT</button>',
rows: 2,
slidesPerRow: 4
});
rows,slidesPerRowにオプションを追加してやれば最も簡単に実装することができました。
■ 関連記事 : JavaScriptの基礎習得に役立つ技術書【おすすめ3選】
参考 : slick rows
