カルーセルスライダー「slick」の使い方をシンプルに解説

使いやすくてカスタマイズ性の高いカルーセルスライダー「slick」についての解説です。

slickの読み込み

まずはheadタグ内に下のコードを貼り付けます。

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

スライダーの設置

基本の形↓

<div class="xxxx">
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
</div>

基本的には$(“.xxxx”).slick();だけで動作しますが、slickにはオプションがいろいろ用意されています。

よく使うものをピックアップしたので、必要なものだけ書き加えてください。

$(".xxxx").slick({
	// オプション
	autoplay: true, // 自動再生(初期値:false)
	autoplaySpeed: 5000, // 自動再生の切り替えの間隔(初期値:3000)
	arrows: false, // 前次ボタンの表示(初期値:true)
	prevArrow: '<a class="slick-prev" href="#">前へ</a>', // 前ボタンを変更 (初期値:'<button type="button" class="slick-prev">Previous</button>')
	nextArrow: '<a class="slick-next" href="#">次へ</a>', // 次ボタンを変更(初期値:'<button type="button" class="slick-next">Next</button>')
	centerMode: true, // センターモード。前後のスライドを一部だけ表示(初期値:false)
	centerPadding: '80px', // centerMode:trueのときの前後のスライドの幅(初期値:'50px')
	cssEase: 'linear', // CSSのアニメーションのイージング(初期値:'ease')
	dots: true, // ドットナビゲーションの表示(初期値:false)
	dotsClass: 'custom-dots', // ドットのクラスを変更(初期値:slick-dots)
	fade: true, // スライドをフェードで切り替え(初期値:false)
	pauseOnFocus: false, // スライドにフォーカスしたときに自動再生を停止(初期値:true)
	pauseOnHover: false, // スライドにホバーしたときに自動再生を停止(初期値:true)
	rows: 2, // 行の数(初期値:1)
	slidesPerRow: 4, // rowsの値が2以上のときの、1行あたりのスライド数(初期値:1)
	slidesToShow: 3, // 表示させるスライド数(初期値:1)
	slidesToScroll: 3, // 1回でスクロールさせるスライド数(初期値:1)
	speed: 500, // スライド切り替えのスピード(初期値:300)
});

全てのオプションはこちら↓

slickはオプションでレスポンシブ対応ができますが、コードが見にくくなるという方は、こちらの方法もどうぞ↓