Slick カルーセルでPCとスマホで見せる画像の枚数をそれぞれ変える。wordpress

23.05.26

ウェブデザイン備忘録

カルーセルを設定してPCとスマホでそれぞれ一度に表示する画像を変える方法
例えばPCの時は3枚、スマホの時は2枚にするには、以下のように記入。
下の方にある breakpoint: 750,部分がPC,スマホの幅分岐点になり、750px以下ならslidesToShow: 2枚となる。

$(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枚表示 } } ] }); });

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を作って、追加すればよい。

// 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枚表示 } } ] }); });

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枚表示         }       }     ]   }); });

お役に立てましたらadsenseクリックお願いします！

いかがでしたでしょうか？もしお役に立てましたら、お賽銭のつもりでadsenseをポチっとクリックお願いします！↓上手くいきますようにお祈りしておきます！

関連記事

• 
  2020.04.03 wordpress カスタム投稿タイプでトップページなどに記事のサムネイルやタイトルを表示させリンクさせる方法
• 
  2023.09.14 サーバーメンテナンス時に.htaccessに書き込んで外部サイト(メンテナンスページ)にリダイレクト。
• 
  2018.11.20 スクロールすると画面上部に固定されたメニューバーが出現する方法　
• 
  2018.10.26 サクラサーバーにワードプレスをインストールするまでの流れ
• 
  2019.04.05 マウスオーバーした時に画像がふわっと大きくなる方法
• 
  2024.06.25 SSL証明書を証明書としてダウンロードする方法