Slickで実装する中央要素拡大カルーセル

こんにちは！今回は**jQuery用カルーセルライブラリ「Slick」**を使って、中央の要素だけが大きく表示されるカルーセルの実装方法について解説します。

よくあるECサイトやポートフォリオサイトで見かけるこのUIパターンを、実際のコードとともに学んでいきましょう。

完成イメージ

実装するのは以下のような機能を持つカルーセルです：

中央の要素が大きく表示される
左右の要素は小さく表示
スムーズな切り替えアニメーション
レスポンシブ対応

環境構築

まずは必要なライブラリを読み込みます。HTMLのheadタグ内に以下のコードを追加してください：

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<!-- Slick本体 -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

実装手順

1. HTML構造

まずは基本的なHTML構造を作成します：

<div class="carousel-wrapper">
    <div class="center-carousel">
        <div class="carousel-item">
            <img src="image1.jpg" alt="画像1">
            <h3>タイトル1</h3>
        </div>
        <div class="carousel-item">
            <img src="image2.jpg" alt="画像2">
            <h3>タイトル2</h3>
        </div>
        <div class="carousel-item">
            <img src="image3.jpg" alt="画像3">
            <h3>タイトル3</h3>
        </div>
        <!-- 必要に応じて追加 -->
    </div>
</div>

2. CSS設定

スタイリングを追加します：

.carousel-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 0;
}

.carousel-item {
    padding: 0 10px;
    transition: transform 0.3s ease;
}

.carousel-item img {
    width: 100%;
    height: auto;
}

/* 中央の要素のスタイル */
.slick-center {
    transform: scale(1.2);
    transition: transform 0.3s ease;
}

/* 左右の矢印のスタイル */
.slick-prev, .slick-next {
    z-index: 1;
}

.slick-prev {
    left: 10px;
}

.slick-next {
    right: 10px;
}

3. JavaScript実装

Slickの初期化とオプション設定を行います：

$(document).ready(function(){
    $('.center-carousel').slick({
        centerMode: true,        // 中央寄せモードを有効化
        centerPadding: '60px',   // 中央のパディング
        slidesToShow: 3,         // 表示するスライド数
        responsive: [            // レスポンシブ設定
            {
                breakpoint: 768,
                settings: {
                    centerMode: true,
                    centerPadding: '40px',
                    slidesToShow: 1
                }
            }
        ],
        dots: true,             // ドットナビゲーションを表示
        autoplay: true,         // 自動再生を有効化
        autoplaySpeed: 3000,    // 自動再生の間隔（ミリ秒）
        speed: 500              // アニメーションの速度（ミリ秒）
    });
});

コード解説

centerModeオプション

centerMode: trueを設定することで、中央寄せモードが有効になります。これにより、アクティブなスライドが中央に配置され、左右のスライドが部分的に表示される形になります。

centerPadding

中央の要素の左右の余白を指定します。この値を調整することで、左右のスライドの表示量を制御できます。

レスポンシブ設定

responsiveオプションで画面サイズに応じた設定が可能です。上記の例では、768px以下の画面幅で表示するスライド数を1枚に変更しています。

カスタマイズポイント

拡大率の調整

.slick-center {
    transform: scale(1.2); /* この値を変更して拡大率を調整 */
}

アニメーション速度の調整

speed: 500, // この値を変更してアニメーション速度を調整

自動再生の設定

autoplay: true,
autoplaySpeed: 3000, // 間隔を調整（ミリ秒）

まとめ

SlickのcenterModeを使用することで、比較的簡単に中央要素が大きくなるカルーセルを実装できました。主なポイントは：

centerMode: trueの設定
CSSでのtransform: scale()による拡大表示
レスポンシブ対応の設定

このような実装は、商品紹介やポートフォリオサイトでよく使用されるUIパターンです。必要に応じて、拡大率やアニメーション速度、表示スライド数などをカスタマイズしてください。

(Visited 6 times, 1 visits today)