【Swiper】中央のスライドを大きく表示して左右をチラ見せする方法

こんにちは、Ryohei（@ityryohei）です！

本記事では、Swiperで中央のスライドを大きく表示して左右のスライドをチラ見せするスライダーの作り方をご紹介しています。

Swiperで前後のスライドを見せつつ中央のスライドを大きく表示したいんだけど、良い方法ないかな？

上記の疑問にお答えします。

では、解説していきます。

本記事で作成するもの

下記は本記事でご紹介するSwiperのデモです。中央のスライドを大きく表示して左右のスライドが少しだけ見える状態になっています。

See the Pen Swiper｜large center image by ryohei (@intotheprogram) on CodePen.

こだわったポイントは、中央のスライドを大きく表示した点と左右のスライドを少し見せている点です。上記の埋め込みではわかりにくいですが、ブレイクポイント毎に表示するスライドの枚数を指定しています。なのでウィンドウサイズが大きくなるにつれて表示されるスライドの枚数も増加します。上記のようなSwiperを作成した方に参考にしていただければと思います。

では、作り方を見ていきましょう！

Swiperの用意

Swiperを使用しますので、各種ファイルを読み込む必要があります。公式サイトにてCDNが提供されていますので、本記事ではCDNで読み込みます。

//CSS
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />

//JS
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

開発中はCDNを使用するのも有りですが、CDNのURLは前触れなく変更になる可能性がありますので、公開時はローカルもしくは自社のサーバー等から読み込むようにすることをおすすめします。

以上でSwiperに必要なファイルの読み込みは完了です。続いてSwiperのスライダーを作成していきます。

SwiperのHTMLレイアウトを作成する

HTMLでSwiperのレイアウトを作成します。HTMLは基本的なSwiperのレイアウトで問題ありません。私の場合はスクロールバーとページネーションは必要なかったため、外しています。他はデフォルトのまま下記のように作成しています。

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="sample1.jpg" alt=""></div>
        <div class="swiper-slide"><img src="sample2.jpg" alt=""></div>
        <div class="swiper-slide"><img src="sample3.jpg" alt=""></div>
        <div class="swiper-slide"><img src="sample4.jpg" alt=""></div>
        <div class="swiper-slide"><img src="sample5.jpg" alt=""></div>
        <div class="swiper-slide"><img src="sample6.jpg" alt=""></div>
        <div class="swiper-slide"><img src="sample7.jpg" alt=""></div>
    </div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
</div>

SwiperのCSSを調整する

CSSでは、アクティブスライドを大きく表示するためにtransformのscaleを使用しています。より目立たせるために通常のスライドとアクティブスライドで透明度の値を変えています。 swiper-containerに指定しているpaddingがアクティブスライドが上下にはみ出して表示されるスペースとなりますので、お好みで調整してください。

.swiper-container {
    width: 100%;
    margin: 40px 0;
    padding: 45px 0;
}

.swiper-slide {
    opacity: 0.4;
    overflow: hidden;
    transition: .7s;
}

.swiper-slide img {
    width: 100%;
}

.swiper-slide-active {
    opacity: 1;
    z-index: 1;
    transform: scale(1.5); /* スライドの大きさ調整 */
}

Swiperを初期化する

最後にJavaScriptでSwiperを初期化します。SlidesPerViewで表示するスライド枚数を設定します。小数点を指定することで左右のチラ見せ具合を調整することができます。ブレイクポイントに関してはお好みで調整してくださいね。

const swiper = new Swiper('.swiper-container', {
    centeredSlides: true,
    loop: true,
    speed: 500,
    slidesPerView: 1.5,
    spaceBetween: 40,
    autoplay: {
        delay: 3000,
    },
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
    breakpoints: {

        640: {
            slidesPerView: 2.5,
        },
        768: {
            slidesPerView: 2.75,
        },
        1080: {
            slidesPerView: 3.25,
        },
        1280: {
            slidesPerView: 3.75,
        },
    },
});

ここまで実装すると冒頭でご紹介したデモのSwiperを作成することができます。