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

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

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

https://kokopelli.pw/2545

流れるように動かす

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>

 

 

 

 

コメント

タイトルとURLをコピーしました