概要
slick の基本的な実装方法を紹介。用途
- プラグインで簡単に高機能スライダーを実装。
- オプションでレスポンシブに対応。
- カルーセルスライダーが安定。
検証ブラウザ
- Google Chrome(最新)
- Safari(最新)
- Firefox(最新)
- Microsoft Edge(最新)
- IE11
その他
- jQuery v3.6.0使用。
- slick.js v1.8.1使用。
実装方法
- 公式サイト : http://kenwheeler.github.io/slick/
- ダウンロード : http://kenwheeler.github.io/slick/#go-get-it
- オプション : https://kenwheeler.github.io/slick/#settings
HTML
<div class="c-slider">
<div class="c-slider__slides js-slider">
<div class="c-slider__slide">
<img src="https://picsum.photos/600/400?random=1" alt="" decoding="async">
</div>
<div class="c-slider__slide">
<img src="https://picsum.photos/600/400?random=2" alt="" decoding="async">
</div>
<div class="c-slider__slide">
<img src="https://picsum.photos/600/400?random=3" alt="" decoding="async">
</div>
<div class="c-slider__slide">
<img src="https://picsum.photos/600/400?random=4" alt="" decoding="async">
</div>
</div>
</div>
<!-- [/c-slider] -->
SCSS
.c-slider {
&__slide {
img {
width: 100%;
}
}
//矢印を表示する場合
.slick-prev {
left: 0; //調整
z-index: 1;
}
.slick-next {
right: 0; //調整
}
}
CSS
.c-slider__slide img {
width: 100%;
}
.c-slider .slick-prev {
left: 0;
z-index: 1;
}
.c-slider .slick-next {
right: 0;
}
JS
$(function () {
'use strict';
const $slider = $('.js-slider');
//オプション : https://kenwheeler.github.io/slick/#settings
$slider.slick({
autoplay: true,
autoplaySpeed: 4000,
speed: 1000,
pauseOnHover: false,
pauseOnFocus: false,
centerMode: true,
centerPadding: '5%',
slidesToShow: 3,
dots: true,
// arrows: false,
responsive: [
{
breakpoint: 751, // デバイス幅750px以下の設定
settings: {
arrows: false,
centerMode: false,
slidesToShow: 1
}
}
]
});
});
ローカル環境にコードを移設した際に動作しない場合はこちら。（トラブルシューティングページへ）
