楽天やヤフーストアの新着情報などに使えるカルーセルスライダー「slick」の便利なオプション

レスポンシブデザインで便利なスライダー「slick」、楽天やヤフーショッピングなどの新着などでカルーセルとして使う場合の便利なオプションをまとめてみました。

※CDNでの導入方法は過去記事を参考にしてください。

レスポンシブで使うカルーセルスライダーならシンプルな「slick」がおすすめです。ダウンロードサイト ※「Download Now」はリンク切れの場合は「View On Github」からダウンロードが可能。今回はヤフーショッピングサイ...

流れるように動かす

autoplaySpeed: 0,//スライドするまでの時間を0にするオプション
cssEase: 'linear',//スムーズに流れるようにするオプション
speed: 5000,//流れるスピードはここで調整

autoplaySpeed: 0,//スライドするまでの時間を0にするオプション

cssEase: 'linear',//スムーズに流れるようにするオプション

speed: 5000,//流れるスピードはここで調整

画面サイズによってスライダーの数を変える（Bootstrap）風

「slick」では画面サイズによってカルーセルの数を変更できます、Bootstrapでの利用も多いと思うのでBootstrapのブレークポイントに合わせてみます。

Bootstrap3のブレークポイント

デバイスの幅	極小モバイルサイズ <768px	小タブレットサイズ ≥768px	中デスクトップサイズ ≥992px	大大画面サイズ ≥1200px
コンテナの最大幅	なし（自動）	750px	970px	1170px
クラス名	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`

Bootstrap4のブレークポイント

デバイスの幅	極小縦モバイルサイズ <576px	小横モバイルサイズ ≥576px	中タブレットサイズ ≥768px	大デスクトップサイズ ≥992px	特大大画面サイズ ≥1200px
コンテナの最大幅	なし（自動）	540px	720px	960px	1140px
クラス名	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`

Bootstrap4ページのブレークポイントに合わせると＜例＞

<!-- slick JS -->

  <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(document).on('ready', function() {
      $(".slick-box").slick({
        autoplay:true,
		accessibility:false,
		arrows:false,
        infinite: true,
        slidesToShow: 5,
        slidesToScroll: 1,
		responsive: [{
			breakpoint: 1200,settings: { //992px～1200pxでは5画像表示
				slidesToShow: 5,
				slidesToScroll: 5,
			}
		},
		{
			breakpoint: 991,settings: { //768px～991pxでは5画像表示
				slidesToShow: 5,
				slidesToScroll: 5,
			}
		},
		{
			breakpoint: 767,settings: { //576px～767pxでは2画像表示
				slidesToShow: 2,
				slidesToScroll: 2,
			}
		},
		{
			breakpoint: 575,settings: {//575px以下では2画像表示
				slidesToShow: 2,
				slidesToScroll: 2
			}
		}]
});
    });
</script>

$(document).on('ready', function() {

$(".slick-box").slick({

autoplay:true,

accessibility:false,

arrows:false,

infinite: true,

slidesToShow: 5,

slidesToScroll: 1,

responsive: [{

breakpoint: 1200,settings: { //992px～1200pxでは5画像表示

slidesToShow: 5,

slidesToScroll: 5,

}

{

breakpoint: 991,settings: { //768px～991pxでは5画像表示

slidesToShow: 5,

slidesToScroll: 5,

}

{

breakpoint: 767,settings: { //576px～767pxでは2画像表示

slidesToShow: 2,

slidesToScroll: 2,

}

{

breakpoint: 575,settings: {//575px以下では2画像表示

slidesToShow: 2,

slidesToScroll: 2

}

}]

});

</script>