Swiperで実装する中央要素強調カルーセル【サンプルコード付き】 |

こんにちは！今回は、JavaScriptのライブラリ「Swiper」を使って、中央の要素が大きく表示されるカルーセルスライダーの実装方法をご紹介します。

完成イメージと実装のポイント

このチュートリアルでは、以下のような特徴を持つカルーセルスライダーを実装します：

中央の要素が大きく表示される
スライド時のアニメーションが滑らか
レスポンシブ対応
タッチスワイプ対応

必要な環境設定

まずは、Swiperをプロジェクトに導入します。head要素内に以下のCDNリンクを追加してください。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

HTMLの実装

以下のHTMLコードをご利用ください。

<div class="swiper-container">
    <div class="swiper">
        <div class="swiper-wrapper">
            <!-- スライド1 -->
            <div class="swiper-slide">
                <div class="slide-content">
                    <img src="画像1のURL" alt="スライド1">
                    <h3>タイトル1</h3>
                </div>
            </div>
            <!-- スライド2 -->
            <div class="swiper-slide">
                <div class="slide-content">
                    <img src="画像2のURL" alt="スライド2">
                    <h3>タイトル2</h3>
                </div>
            </div>
            <!-- スライド3 -->
            <div class="swiper-slide">
                <div class="slide-content">
                    <img src="画像3のURL" alt="スライド3">
                    <h3>タイトル3</h3>
                </div>
            </div>
            <!-- 必要に応じてスライドを追加 -->
        </div>
        <!-- ナビゲーションボタン -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>
</div>

CSSの実装

.swiper-container {
    padding: 40px 0;
    max-width: 1200px;
    margin: 0 auto;
}

.swiper {
    width: 100%;
    padding: 50px 0;
}

.swiper-slide {
    transition: transform 0.3s;
    /* 通常のスライドサイズ */
    width: 300px;
    height: 400px;
}

.slide-content {
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    overflow: hidden;
}

.slide-content img {
    width: 100%;
    height: 70%;
    object-fit: cover;
}

.slide-content h3 {
    padding: 15px;
    margin: 0;
    font-size: 18px;
    text-align: center;
}

/* アクティブなスライド（中央）のスタイル */
.swiper-slide-active {
    transform: scale(1.2);
    z-index: 2;
}

/* 前後のスライドのスタイル */
.swiper-slide-prev,
.swiper-slide-next {
    transform: scale(0.8);
    opacity: 0.7;
}

JavaScriptの実装

document.addEventListener('DOMContentLoaded', function() {
    const swiper = new Swiper('.swiper', {
        // 基本設定
        slidesPerView: 3,
        centeredSlides: true,
        spaceBetween: 30,
        loop: true,
        
        // スライド時のエフェクト
        effect: 'coverflow',
        coverflowEffect: {
            rotate: 0,
            stretch: 0,
            depth: 100,
            modifier: 1,
            slideShadows: false,
        },
        
        // ナビゲーションボタン
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        
        // レスポンシブ設定
        breakpoints: {
            // スマートフォン
            320: {
                slidesPerView: 1,
                spaceBetween: 10
            },
            // タブレット
            768: {
                slidesPerView: 2,
                spaceBetween: 20
            },
            // PC
            1024: {
                slidesPerView: 3,
                spaceBetween: 30
            }
        }
    });
});

カスタマイズポイント

1. スライドサイズの調整

CSSの.swiper-slideのwidth、heightを変更することで、スライドのサイズを調整できます。

2. 拡大率の変更

CSSの.swiper-slide-activeのtransform: scale()の値を変更することで、中央スライドの拡大率を調整できます。

3. トランジション速度の調整

JavaScriptのオプションにspeedパラメータを追加することで、スライド切り替えの速度を調整できます：

javascriptCopyconst swiper = new Swiper('.swiper', {
    // 既存の設定
    speed: 500, // ミリ秒単位で指定
});

4. 自動再生の追加

自動再生を追加する場合は、以下のオプションを追加します：

const swiper = new Swiper('.swiper', {
    // 既存の設定
    autoplay: {
        delay: 3000, // 3秒間隔
        disableOnInteraction: false, // ユーザー操作後も自動再生を継続
    },
});

まとめ

Swiperを使用することで、美しい中央要素強調カルーセルを簡単に実装できます。主なポイントは以下の通りです：

centeredSlidesオプションで中央寄せを実現
transformプロパティで中央要素の拡大を制御
レスポンシブ対応でさまざまな画面サイズに対応
カスタマイズ性が高く、デザインの自由度が高い

このコードをベースに、プロジェクトの要件に合わせてカスタマイズしてください。

(Visited 4 times, 1 visits today)