問題
「slick」で、PCとスマートフォンでの表示スライド数を変えたい。
解決策
「slick」のオプションで「responsive」、「breakpoint」を用いて、「slidesToShow」の数値を変更する。
スマートフォンでの表示スライド数の調整
スマートフォンはどんな機種であっても、どうしても幅に制限が出てしまい、表示するスライド数を調整する必要が出てきてしまいます。
今回はjQueryのスライダープラグイン「slick」で、PCとスマートフォンで表示スライド数を変える方法をご紹介します。
DEMOはこちら
HTML
<div class="slick-box showchange">
<div class="slide">
<p class="titles">スライド01</p>
<p class="text">スライド01です。</p>
</div>
<div class="slide">
<p class="titles">スライド02</p>
<p class="text">スライド02です。</p>
</div>
<div class="slide">
<p class="titles">スライド03</p>
<p class="text">スライド03です。</p>
</div>
<div class="slide">
<p class="titles">スライド04</p>
<p class="text">スライド04です。</p>
</div>
<div class="slide">
<p class="titles">スライド05</p>
<p class="text">スライド05です。</p>
</div>
<div class="slide">
<p class="titles">スライド06</p>
<p class="text">スライド06です。</p>
</div>
<div class="slide">
<p class="titles">スライド07</p>
<p class="text">スライド07です。</p>
</div>
<div class="slide">
<p class="titles">スライド08</p>
<p class="text">スライド08です。</p>
</div>
<div class="slide">
<p class="titles">スライド09</p>
<p class="text">スライド09です。</p>
</div>
<div class="slide">
<p class="titles">スライド10</p>
<p class="text">スライド10です。</p>
</div>
</div>CSS
.slick-box .slide{
padding: 20px;
background-color: #EAE6E5;
border: 1px solid #ffffff;
border-right: none;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
}
.slick-box .titles{
margin-bottom: 10px;
font-size: 125%;
font-weight: bold;
letter-spacing: 1pt;
text-align: center;
}「slick」のオプションのうちの一つ「responsive」を使用する。
「slick」には様々なオプションが用意されています。
その中で「responsive」の項目の設定を行うことで、PCとスマートフォンで表示スライド数の調整が可能となります。
| responsive | レスポンシブのブレイクポイントを設定することができ、オプションを切り替えることができます。 |
|---|
記述例
$('スライドを適用させる要素').slick({
...
responsive: [{
breakpoint: ブレイクポイントの数値,
settings: {
ブレイクポイント以下のウインドウ幅の時のオプション設定
}
}]
});ポイント!
この「responsive」で設定した「breakpoint」以下のウインドウ幅の時、この中のオプションの設定が優先されます。
表示スライド数の調整を行った記述例
上記を元にした、「slick」の表示スライド数をPC時には4つに、スマートフォン時には2つにする記述例は以下となります。
$('.slick-box.showchange').slick({
infinite: true,
slidesToShow: 4, // 表示スライド数 4つ
slidesToScroll: 1,
adaptiveHeight: true,
autoplay: true,
autoplaySpeed: 5000,
focusOnSelect: true,
pauseOnFocus: false,
pauseOnHover: false,
pauseOnDotsHover: false,
swipeToSlide: true,
arrows: false,
responsive: [{
breakpoint: 767,
settings: {
slidesToShow: 2, // 表示スライド数 2つ
slidesToScroll: 1,
}
}]
});参照
【[jQuery] レスポンシブ対応のカルーセルは「slick」が使いやすかった | 株式会社カンマン】
https://www.comman.co.jp/jquery-responsive-carousel-slick/
コメント