Slick 画像の幅を固定したままで、左右隅々まで無限カルーセルする方法

23.05.26

ウェブデザイン備忘録

画像そのものに幅指定のcssが効かないようになっている。(width:300px;がダメ！)。一度に流れる枚数を基準にできた仕様のため、画像幅がレスポンシブされてしまう。

目次

• 1 まずSlickを設定したら、jsフォルダ内のmain.jsに以下を記入。
• 2 これを囲う親クラスを作成。
• 3 左右の見えない部分を見せるようにする。
• 4 画像と画像の間に空間を作る。

まずSlickを設定したら、jsフォルダ内のmain.jsに以下を記入。

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

まだこのままだと、レスポンシブが効いていて、ブラウザの幅を広げると流れる画像幅も大きくなってしまう。

これを囲う親クラスを作成。

<div class="contents01"> <ul class="slide-items"> <li><img src="<?php echo get_template_directory_uri(); ?>/images/top_bnr01.jpg" alt=""></li> <li><img src="<?php echo get_template_directory_uri(); ?>/images/top_bnr02.jpg" alt=""></li> <li><img src="<?php echo get_template_directory_uri(); ?>/images/top_bnr03.jpg" alt=""></li> <li><img src="<?php echo get_template_directory_uri(); ?>/images/top_bnr01.jpg" alt=""></li> <li><img src="<?php echo get_template_directory_uri(); ?>/images/top_bnr02.jpg" alt=""></li> <li><img src="<?php echo get_template_directory_uri(); ?>/images/top_bnr03.jpg" alt=""></li> </ul> </div>

1 2 3 4 5 6 7 8 9 10 11

<div class="contents01">     <ul class="slide-items">        <li><img src="<?php echo get_template_directory_uri(); ?>/images/top_bnr01.jpg" alt=""></li>        <li><img src="<?php echo get_template_directory_uri(); ?>/images/top_bnr02.jpg" alt=""></li>        <li><img src="<?php echo get_template_directory_uri(); ?>/images/top_bnr03.jpg" alt=""></li>        <li><img src="<?php echo get_template_directory_uri(); ?>/images/top_bnr01.jpg" alt=""></li>        <li><img src="<?php echo get_template_directory_uri(); ?>/images/top_bnr02.jpg" alt=""></li>        <li><img src="<?php echo get_template_directory_uri(); ?>/images/top_bnr03.jpg" alt=""></li> </ul>   </div>

まずは、これを囲うclassを作り（例：contents01)幅を指定させる。例えばこのclassの幅を1140px、中央ぞろえ（margin:0 auto;）にする。
そうすることで、左右はまだ非表示だが、ブラウザを可変しても高さがそろった画像が流れるようになったはず。
（1140pxを一度に3枚表示する幅で見せているので、自動的に380pxの幅の画像が流れている。）

左右の見えない部分を見せるようにする。

左右の見えない部分を見せるようにする。そのためには以下のcssを記入。

.slick-list { overflow: visible !important; }

1 2 3

.slick-list { overflow: visible !important; }

見えてない部分はslickのもともとのcssがoverflow:hidden;になっているので、上記コードを手動で作ってvisible！見えるようにしておく。

画像と画像の間に空間を作る。

画像と画像の間に空間を作る場合は、以下のcssを記入。

.slide-items li img{ max-width: 98%; }

1 2 3

.slide-items li img{ max-width: 98%; }

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

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

関連記事

• 
  2024.06.28 カラースキームの選び方: 初心者Webデザイナー向けガイド
• 
  2023.12.20 ACFで親ページをアーカイブでなく、任意の固定ページに変更する方法
• 
  2023.12.20 WordPress カスタム投稿タイプのパーマリンクを思い通りに変更する方法
• 
  2023.12.22 投稿ページやカスタム投稿タイプでも カスタムテンプレートを使用できるようにする
• 
  2023.08.18 Xサーバーでマルウェアに感染したら！復元リカバリー方法！
• 
  2024.04.08 2024年度版 Googleアナリティクスコンバージョン設定方法