Swiperは簡単にスライダーを作成することが出来るプラグインです。
この記事ではSwiperを使ってカルーセルスライダーを実装する方法をご紹介したいと思います。

実装サンプル

まずはSwiperを使ったカルーセルスライダーの実装サンプルです。CSSだけデザインに合わせて調整することでコピペですぐに使うことが出来きます。

HTMLはこちら。

<div class="swiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide -slide1"><img src="https://irodori-design-web.com/blog_image/3261/3261-1.jpg"></div>
        <div class="swiper-slide -slide2"><img src="https://irodori-design-web.com/blog_image/3261/3261-2.jpg"></div>
        <div class="swiper-slide -slide3"><img src="https://irodori-design-web.com/blog_image/3261/3261-3.jpg"></div>
        <div class="swiper-slide -slide4"><img src="https://irodori-design-web.com/blog_image/3261/3261-4.jpg"></div>
        <div class="swiper-slide -slide5"><img src="https://irodori-design-web.com/blog_image/3261/3261-5.jpg"></div>
    </div>
</div>

CSSはこちら。

*{
    margin: 0;
    padding: 0;
}
.swiper {
    width: 100%;
    height: 100%;
}
.swiper-slide img {
    display: block;
    width: 100%;
    height: 100vh;
    object-fit: cover;
}

JavaScriptはこちら。
Swiperでカルーセルスライダーを実装する場合の最小設定だと思います。

var swiper = new Swiper('.swiper', {
    loop: true, // 無限ループするか
  　slidesPerView: 1.5, // 画像を何枚表示するか
    centeredSlides : true, // アクティブスライドを中央配置するか
    //自動再生する場合
    autoplay: { 
        delay: 5000, // 切り替わってから次の切り替わりが始まるまでの待機時間を設定
    },
});

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

コード解説

Swiperでカルーセルスライダーを実装する場合、同時に何枚のスライド画像を表示するかの設定とアクティブスライドを中央に配置する設定をします。

slidesPerView: 1.5,

slidesPerViewのオプションで同時に何枚のスライド画像を表示するかを設定します。

centeredSlides : true,

slidesPerViewのオプションをtrueにすることでアクティブスライドを中央に配置することが出来ます。

slidesPerView: 1.5,
centeredSlides : true,

このようにすることで、アクティブスライドを中央に配置しつつ、左右のスライドをチラ見セすることが出来ます。

その他のサンプル

ここからはSwiperを使ったカルーセルスライダーのサンプルをいくつかご紹介します。

左右のスライドの間隔を空ける

隣り合う画像の間隔を空けたい場合はspaceBetweenを指定します。

spaceBetween: 10,

数値を指定し、指定した数値のピクセルだけ左右の画像の間隔が空きます。

JavScriptはこちら。

var swiper = new Swiper('.swiper', {
    loop: true, // 無限ループするか
  　slidesPerView: 1.5, // 画像を何枚表示するか
    centeredSlides : true, // アクティブスライドを中央配置するか
    //自動再生する場合
    autoplay: { 
        delay: 5000, // 切り替わってから次の切り替わりが始まるまでの待機時間を設定
    },
    spaceBetween: 10, // 左右の画像の間隔を何ピクセルあけるか
});

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

左右のスライドを半透明にする

左右のスライドは半透明にしてアクティブスライドだけ目立つようにしたい場合は、以下のCSSを追加します。

.swiper-slide-next,
.swiper-slide-prev {
    opacity: 0.5;
    transition: .3s all ease-in-out;
}

左右のスライドにはそれぞれクラスが追加されるのでそれらにopacityを指定します。
Swiperの設定はそのままで大丈夫です。

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

まとめ

いかがでしたか？
少ないコードで簡単にカルーセルスライダーを作ることが出来ましたね。
Swiperにはまだまだ多くのオプションが用意されています。
いろいろ試してみるのも面白いですね。