CSSで無限ループのスライドショーを作成する方法

CSSだけを使って、無限ループするスライドショーを作成する方法を紹介します。JavaScriptを使わずに、アニメーションとCSSの @keyframes を駆使してスライドショーを実現することができます。この記事では、基本的なスライドショーの作成手順を解説し、コード例を提供します。

目次

• スライドショーの基本構造
• CSSでスライドショーのアニメーションを設定
• 無限ループの設定
• スライドの速度と調整
• まとめ

スライドショーの基本構造

まずは、HTMLの基本構造から見ていきましょう。スライドショーのアイテムは、<ul> と <li> を使って並べます。画像やコンテンツを各 <li> 要素内に配置します。

<section class="gallery">
  <ul class="gallery_slide">
    <li><img src="img/〇〇.jpg" alt="Image 1"></li>
    <li><img src="img/〇〇.jpg" alt="Image 2"></li>
    <li><img src="img/〇〇.jpg" alt="Image 3"></li>
    <li><img src="img/〇〇.jpg" alt="Image 4"></li>
    <li><img src="img/〇〇.jpg" alt="Image 5"></li>
    <li><img src="img/〇〇" alt="Image 6"></li>
  </ul>
</section>

ここでは、6つの画像をスライドショーのアイテムとして表示しています。

CSSでスライドショーのアニメーションを設定

次に、CSSを使ってスライドショーのアニメーションを設定します。ここでは、@keyframes を使ってスライドが左に移動するアニメーションを定義します。

/* 親要素の設定 */
.gallery {
  width: 100%;
  overflow: hidden; /* 子要素がはみ出さないようにする */
}

/* スライダー部分の設定 */
.gallery_slide {
  display: flex; /* 横並びにする */
  width: 100%; /* 横幅いっぱいにする */
  animation: slide 24s linear infinite; /* アニメーションの設定 */
}

/* 各アイテムの設定 */
.gallery_slide li {
  flex: 0 0 25%; /* 1つの画像が全体の4分の1の幅を取る */
  width: 100%; /* 幅を指定 */
}

/* アニメーション（スライド） */
@keyframes slide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%); /* 1周分の移動 */
  }
}

このCSSでは、@keyframes を使ってスライドを左に移動させています。100% で translateX(-100%) に設定して、全体が1周移動するようにしています。

無限ループの設定

スライドショーを無限にループさせるためには、@keyframes のアニメーションに infinite を指定します。これにより、スライドが1周した後に再び最初の位置に戻り、アニメーションが繰り返し再生されます。

/* スライダー部分の設定 */
.gallery_slide {
  display: flex;
  width: 100%;
  animation: slide 24s linear infinite; /* 無限ループの設定 */
}

infinite を指定することで、スライドショーが途切れることなく繰り返し動作します。

スライドの速度と調整

スライドの進行速度は、@keyframes のアニメーション期間（例えば 24s）で調整できます。数字を小さくすると速く、大きくすると遅くなります。以下はアニメーションの期間を12秒に変更した例です。

/* アニメーション（スライド） */
@keyframes slide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

.gallery_slide {
  display: flex;
  width: 100%;
  animation: slide 12s linear infinite; /* 12秒で1周する設定 */
}

また、画像が4つずつ並ぶ場合、25% の幅を持つアイテムを使っていますが、並べるアイテム数に応じて調整が必要です。

まとめ

CSSだけで無限ループのスライドショーを作成する方法について説明しました。@keyframes を使ってアニメーションを作成し、translateX を使ってスライドを左に移動させ、infinite で無限ループを実現しました。

この方法では、JavaScriptを使うことなく、純粋にCSSだけで美しいスライドショーを実現できます。スライドの速度やアイテムの数に合わせてアニメーションを調整することもできるので、様々なレイアウトに応じたカスタマイズが可能です。

この記事を参考にして、あなたのウェブサイトにシンプルで美しいスライドショーを追加してみてください！