フェードで切り替わるスライダーを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

スライダー

フェードで切り替わるスライダーを作る方法

フェードで切り替わるスライダーをHTML・CSS・JavaScriptで作る方法を紹介します。画像が横に移動するのではなく、ふわっと重なりながら切り替わるため、落ち着いた印象のメインビジュアルやギャラリーを作りたい場合に使いやすいサンプルです。

このサンプルでは、複数の画像を同じ位置に重ねて配置し、JavaScriptで表示中の画像だけにクラスを付け替えます。CSSのopacityとtransitionを使ってフェード切り替えを行うため、シンプルなコードで自然な画像切り替えを実装できます。

画像の変更はHTML側で行い、フェード速度はCSSのtransitionで調整できます。トップページのキービジュアル、写真ギャラリー、商品イメージの切り替えなど、横スライドよりも柔らかい見せ方をしたいWebサイトにおすすめです。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

このデモでは、「前へ」「次へ」ボタンをクリックすると画像がフェードしながら切り替わります。横にスライドせず、ふわっと表示が変わる動きを確認できます。

画像1 画像2 画像3

コードをコピーして使おう！

<!DOCTYPE html>
<html lang="ja">
<head>

  <!-- 文字コード -->
  <meta charset="UTF-8">

  <!-- スマホ表示に対応 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ページタイトル -->
  <title>フェードで切り替わるスライダー</title>

  <!-- CSSファイルを読み込み -->
  <link rel="stylesheet" href="style.css">

</head>
<body>

  <!-- フェードスライダー全体 -->
  <div class="fade-image-slider_demo">

    <!-- 画像表示エリア -->
    <div class="fade-image-slider_box">

      <!-- 画像1：sample/images/ に配置した画像名へ変更 -->
      <img class="fade-image-slider_image is-active" src="images/【ここに1枚目の画像ファイル名】" alt="画像1">

      <!-- 画像2：sample/images/ に配置した画像名へ変更 -->
      <img class="fade-image-slider_image" src="images/【ここに2枚目の画像ファイル名】" alt="画像2">

      <!-- 画像3：sample/images/ に配置した画像名へ変更 -->
      <img class="fade-image-slider_image" src="images/【ここに3枚目の画像ファイル名】" alt="画像3">

    </div>

    <!-- 操作ボタン -->
    <div class="fade-image-slider_controls">

      <button class="fade-image-slider_button" type="button" id="fade-image-slider-prev">
        前へ
      </button>

      <button class="fade-image-slider_button" type="button" id="fade-image-slider-next">
        次へ
      </button>

    </div>

  </div>

  <!-- JavaScriptファイルを読み込み -->
  <script src="script.js"></script>

</body>
</html>

ファイル構成と設置方法

このサンプルは、HTML・CSS・JavaScriptの3ファイルで構成されています。HTMLでスライダーのレイアウトを作成し、CSSで画像を重ねてフェードアニメーションを設定し、JavaScriptで表示する画像を切り替えます。表示する画像は sample/images/ フォルダへ配置して使用します。 

sample/
├── index.html
├── style.css
├── script.js
└── images/
    ├── 【ここに1枚目の画像】
    ├── 【ここに2枚目の画像】
    └── 【ここに3枚目の画像】

sampleフォルダをそのまま配置し、ブラウザで sample/index.html を開くと動作を確認できます。使用する画像は sample/images/ フォルダへ配置してください。画像ファイル名は index.html の各 img タグの src 属性で指定します。

スライダーの横幅や高さ、角丸、背景色などのデザインは style.css で変更できます。フェード速度は style.css の transition で設定しており、0.6s は0.6秒で切り替わることを表します。数値を大きくするとゆっくり、小さくすると素早くフェードします。

コメント