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%; }

関連記事

• 
  2020.04.08 ドメインだけを他のサーバー（サクラサーバー）へ引っ越し
• 
  2023.05.22 Advanced Custom Fieldsの画像フィールドの使い方と応用方法
• 
  2018.10.27 デザインセンスの良いフリー画像　
• 
  2018.11.13 要素にアニメーションをつける　プラグイン「Shortcodes Ultimate」
• 
  2018.11.20 wordpress 基本タグ各種
• 
  2023.09.06 contactform7 確認画面（切り替え）とサンクスページの設定方法