CSSとJavaScriptを使った初心者向けスライドショーの作り方

Webサイトに目を引くスライドショーを追加したいと思ったことはありませんか？今回はCSSとJavaScriptを使って、簡単にスライドショーを作成する方法をご紹介します。

See the Pen Slide_f_i-o by kasasagi_kmnmc (@kasasagi_kmnmc) on CodePen.

HTMLの基本構造
CSSの設定
1. 注意点と編集方法
  1. 注意点
  2. 編集方法
JavaScriptの設定
似たライブラリの紹介
1. Swiper.js
2. Glide.js
メリットとデメリット
1. メリット
2. デメリット
まとめ

HTMLの基本構造

まず、HTMLの基本構造を作成します。以下のコードをコピーして、自分のプロジェクトに貼り付けましょう。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初心者向けCSSスライドショー</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="background-container">
        <div class="background" id="background1"></div>
        <div class="background" id="background2"></div>
    </div>

    <script src="script.js"></script>
</body>
</html>

CSSの設定

次に、スライドショーの見た目を整えるためにCSSを設定します。ここでは背景画像をフルスクリーンで表示し、フェードイン・フェードアウトのアニメーションを追加します。

/* styles.css */

body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.background-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.background {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 2s ease-in-out;
}

.show {
    opacity: 1;
}

注意点と編集方法

注意点

「 background-container 」の高さと幅は100%に設定されています。これにより、全画面表示でスライドショーが正しく機能します。

「 background 」クラスの「 opacity 」と「 transition 」は、スライドショーの画像切り替えのアニメーション効果を制御します。必要に応じて調整してください。

編集方法

新しい背景画像を追加するには、images 配列に新しい画像のURLを追加します。CSSでスタイルをカスタマイズしたい場合は、対応するクラスにプロパティを追加・変更してください。

JavaScriptの設定

次に、JavaScriptを使用して画像を切り替えるロジックを追加します。

// script.js

document.addEventListener("DOMContentLoaded", function() {
    const images = [
        'url("https://as2.ftcdn.net/v2/jpg/01/17/26/07/1000_F_117260759_MlwGbz5eaJyE2yGkpzv5jDxjaHU9osU1.jpg")',
        'url("https://as2.ftcdn.net/v2/jpg/05/63/93/33/1000_F_563933392_pDs9XqPe67BmwF8S11pOc5b2WOA7spVs.jpg")',
        'url("https://as2.ftcdn.net/v2/jpg/01/65/03/15/1000_F_165031569_SGvF0C07pBOYCnCI7YTAHCNa9nV0uD8D.jpg")'
    ];

    let currentIndex = 0;
    const background1 = document.getElementById('background1');
    const background2 = document.getElementById('background2');
    let currentBackground = background1;
    let nextBackground = background2;

    function switchBackgrounds() {
        currentBackground.style.backgroundImage = images[currentIndex];
        currentBackground.classList.add('show');
        nextBackground.classList.remove('show');
        
        currentIndex = (currentIndex + 1) % images.length;

        // Swap backgrounds
        const temp = currentBackground;
        currentBackground = nextBackground;
        nextBackground = temp;
    }

    // 初期設定：最初の画像を表示する
    currentBackground.style.backgroundImage = images[currentIndex];
    currentBackground.classList.add('show');
    currentIndex++;

    // 定期的に画像を切り替える
    setInterval(switchBackgrounds, 5000); // 5秒ごとに切り替え
});

似たライブラリの紹介

Swiper.js

Swiper.jsは、高度なスライドショーを実装するための強力なライブラリです。多彩なスライド効果、ページネーション、ナビゲーション機能を提供します。

タッチスワイプ、マウスドラッグ、キーボード操作に対応し、多様なデバイスでの利用が可能です。

公式サイト https://swiperjs.com

See the Pen swiper _test_fade by kasasagi_kmnmc (@kasasagi_kmnmc) on CodePen.

Glide.js

Glide.jsは、モバイルフレンドリーな軽量なスライダーライブラリです。カスタマイズが容易で、スムーズなスライド効果を提供します。

タッチスワイプにも対応しており、ユーザーインタラクションに優れた体験を提供します。

公式サイト https://glidejs.com

レスポンシブ対応のjQueryプラグイン「Glide.js」の組み込み - jQuery/JS Chips - コラム | SEMラボラトリー

jQuery/JS Chipsカテゴリに投稿したコラム記事「レスポンシブ対応のjQueryプラグイン「Glide.js」...

メリットとデメリット

メリット

簡単に実装: HTML、CSS、JavaScriptの基本的な知識があれば、誰でもスライドショーを作成できます。
視覚的に魅力的: 背景画像をフェードイン・フェードアウトさせることで、サイトの見栄えを向上させることができます。
ライブラリの利用: Glide.jsやSwiper.jsを使うことで、さらに多彩なスライドショーを実装できます。

デメリット

画像の数に限界: JavaScriptのロジックによって画像が切り替わるため、多数の画像を扱う場合には別のアプローチが必要になることがあります。
JavaScriptに依存: JavaScriptが有効になっていない状態ではスライドショーが機能しないため、ユーザーエクスペリエンスに影響を与えることがあります。