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

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

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

https://kokopelli.pw/2545

流れるように動かす

 

画面サイズによってスライダーの数を変える(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ページのブレークポイントに合わせると<例>

 

 

 

 

コメント

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