CSSのみで実現するカルーセル画像スライド

サイト内に自動再生のカルーセルスライドを表示させたい場合に、よく使われているのが「slick 」ですが、JSを使わずにCSSだけでシンプルに表現することができます。マウスホバーでスライドを停止させたいなど希望がある場合はJSの記述が必要ですが、簡単にスライドさせたいだけというのであればこちらの方法を試してみてください。

デモサンプル

HTMLを記述

前提条件は以下の通りです。

画像をスライドさせるだけ
マウスホバーで画像を半透明
画像をクリックでリンク先へ遷移
画面内に画像を５枚表示させる
スライドはゆっくり動かしたい
レスポンシブ対応

条件はこのくらいでしょうか・・・。

まずは、画像を用意してHTMLを記述していきます。

<div class="mugen-loop">
  <ul>
    <li class="image"><a href="#"><img src="images/bird_01.jpg" alt=""></a></li>
    <li class="image"><a href="#"><img src="images/bird_02.jpg" alt=""></a></li>
    <li class="image"><a href="#"><img src="images/bird_03.jpg" alt=""></a></li>
    <li class="image"><a href="#"><img src="images/bird_04.jpg" alt=""></a></li>
    <li class="image"><a href="#"><img src="images/bird_05.jpg" alt=""></a></li>
    <li class="image"><a href="#"><img src="images/bird_06.jpg" alt=""></a></li>
    <li class="image"><a href="#"><img src="images/bird_07.jpg" alt=""></a></li>
    <li class="image"><a href="#"><img src="images/bird_08.jpg" alt=""></a></li>
    <li class="image"><a href="#"><img src="images/bird_09.jpg" alt=""></a></li>
    <li class="image"><a href="#"><img src="images/bird_10.jpg" alt=""></a></li>
  </ul>
</div>

<ul>

</ul>

</div>

<div class=”mugen-loop“>の中に画像をli要素で並べます。

※もしスライドさせる画像が3枚など極端に少ない場合は、3つのli要素をコピーして6つのliなどにしておきましょう。画像の数が少ないと画面サイズによっては横いっぱいに配置できずに隙間が出来てしまう可能性があります。

CSSを記述

* {
  margin: 0;
  padding: 0;
}

.mugen-loop { overflow: hidden; }

ul {
  list-style: none;
  display: flex;
  width: max-content;
  animation: scrollAnimation 18s linear infinite;
  gap: 10px;
}
@keyframes scrollAnimation {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}

li {
  width: calc(100vw / 5);
  gap: 10px;
}
img {
  display: block;
  width: 100%;
}
a:hover{ opacity: 0.8; }

@media screen and (max-width: 640px) {
  ul{ gap: 3px; }
  li { width: calc(100vw / 3);}
}

* {

margin: 0;

padding: 0;

}

.mugen-loop { overflow: hidden; }

ul {

list-style: none;

display: flex;

width: max-content;

animation: scrollAnimation 18s linear infinite;

gap: 10px;

}

@keyframes scrollAnimation {

0% { transform: translateX(0%); }

100% { transform: translateX(-50%); }

}

li {

width: calc(100vw / 5);

gap: 10px;

}

img {

display: block;

width: 100%;

}

a:hover{ opacity: 0.8; }

@media screen and (max-width: 640px) {

ul{ gap: 3px; }

li { width: calc(100vw / 3);}

}

ul要素に「display:flex;」で画像を横並びに配置し、.mugen-loopに「overflow:hidden;」を指定して、横並びにした際に画面からはみ出す部分を非表示にしておきます。

また、画像と画像の隙間を10px開けるとして「gap: 10px;」を指定しています。別の方法としてli要素に対して「margin:10px;」を指定しても隙間を作れますので、やりやすい方で指定してください。

li要素で1画面に表示させたい画像数を指定していますが、これが「width: calc(100vw / 5);」の部分で５枚画像を表示したい場合はこの数字が「5」でOKです。例えば3枚表示にしたい場合は「width: calc(100vw / 3);」にすればOKです。

スマホ画面サイズの場合、5枚だと画像が小さくなりすぎるの、画面サイズが小さいときには3枚表示にするように指定しています。

各数値はお好みで適宜変更してご利用ください。

デモサンプル