Slick カルーセルでPCとスマホで見せる画像の枚数をそれぞれ変える。wordpress
23.05.26
カルーセルを設定してPCとスマホでそれぞれ一度に表示する画像を変える方法
例えばPCの時は3枚、スマホの時は2枚にするには、以下のように記入。
下の方にある breakpoint: 750,部分がPC,スマホの幅分岐点になり、750px以下ならslidesToShow: 2枚となる。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
$(function(){ $('.slide-items').slick({ autoplay: true, // 自動でスクロール autoplaySpeed: 0, // 自動再生のスライド切り替えまでの時間を設定 speed: 5000, // スライドが流れる速度を設定 cssEase: "linear", // スライドの流れ方を等速に設定 slidesToShow: 3, // 表示するスライドの数 swipe: false, // 操作による切り替えはさせない arrows: false, // 矢印非表示 pauseOnFocus: false, // スライダーをフォーカスした時にスライドを停止させるか pauseOnHover: false, // スライダーにマウスホバーした時にスライドを停止させるか responsive: [ { breakpoint: 750, settings: { slidesToShow: 2, // 画面幅750px以下でスライド3枚表示 } } ] }); }); |
流れる速度やその他も調整したい
流れる速度やその他も調整したいなら、以下のようにスマホ用にclassを作って、追加すればよい。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
// JavaScript Document $(function(){ $('.slide-items').slick({ autoplay: true, // 自動でスクロール autoplaySpeed: 0, // 自動再生のスライド切り替えまでの時間を設定 speed: 5000, // スライドが流れる速度を設定 cssEase: "linear", // スライドの流れ方を等速に設定 slidesToShow: 3, // 表示するスライドの数 swipe: false, // 操作による切り替えはさせない arrows: false, // 矢印非表示 pauseOnFocus: false, // スライダーをフォーカスした時にスライドを停止させるか pauseOnHover: false, // スライダーにマウスホバーした時にスライドを停止させるか responsive: [ { breakpoint: 750, settings: { slidesToShow: 2, // 画面幅750px以下でスライド3枚表示 } } ] }); $('.slide-items_sp').slick({ autoplay: true, // 自動でスクロール autoplaySpeed: 0, // 自動再生のスライド切り替えまでの時間を設定 speed: 5000, // スライドが流れる速度を設定 cssEase: "linear", // スライドの流れ方を等速に設定 slidesToShow: 3, // 表示するスライドの数 swipe: false, // 操作による切り替えはさせない arrows: false, // 矢印非表示 pauseOnFocus: false, // スライダーをフォーカスした時にスライドを停止させるか pauseOnHover: false, // スライダーにマウスホバーした時にスライドを停止させるか responsive: [ { breakpoint: 750, settings: { slidesToShow: 2, // 画面幅750px以下でスライド3枚表示 } } ] }); }); |
関連記事
-
2020.05.06 wordpress css更新時に自動でキャッシュをリロードする方法 -
2018.11.20 wordpress 基本タグ各種
-
2019.12.12 wordpress １つのサーバーで複数のサイトを設置する方法（サクラサーバー） -
2020.04.08 ドメインだけを他のサーバー（サクラサーバー）へ引っ越し
-
2018.11.09 サクラサーバーで無料ＳＳＬを利用する方法
-
