【簡単】Swiperでスライドを中央寄せにする方法【centeredSlides設定】

2024.06.15

コードのこと

スライドを中央寄せにするのは実務でもよく使うSwiperの設定です！

今日は、Swiperを使ってスライドを中央寄せにする方法を一緒に見ていきましょう。
初心者の方でも簡単に設定できるように、具体的なコード例と共に分かりやすく説明しますね。

Swiperの基本設定

Swiperを使うのが初めて！という方はまずは基本からおさえましょう。
以下の記事でSwiperの基本ファイルの読み込みや基本的なHTML/CSS/JavaScriptの書き方を説明していますので初めての方はご確認ください。

【初心者向け】Swiperの基本的な使い方と設定方法

中央寄せにするためのcenteredSlides設定

では、本題の中央寄せ設定に進みましょう。
SwiperのcenteredSlidesオプションを使うことで、簡単にスライドを中央に寄せることができます。

centeredSlidesの概要

centeredSlidesオプションは、スライドを中央に寄せるための設定です。これを有効にすることで、常に中央にスライドが配置されるようになります。

centeredSlidesの実装例

基本のHTML

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="https://nakaemon.net/demo/img/cat01.webp"></div>
        <div class="swiper-slide"><img src="https://nakaemon.net/demo/img/cat02.webp"></div>
        <div class="swiper-slide"><img src="https://nakaemon.net/demo/img/cat03.webp"></div>
        <div class="swiper-slide"><img src="https://nakaemon.net/demo/img/cat01.webp"></div>
        <div class="swiper-slide"><img src="https://nakaemon.net/demo/img/cat02.webp"></div>
        <div class="swiper-slide"><img src="https://nakaemon.net/demo/img/cat03.webp"></div>
    </div>
</div>

JavaScript

const swiper = new Swiper('.swiper-container', {
    centeredSlides: true,
    slidesPerView: 1.8,
    spaceBetween: 10,
    loop: true,
});

基本的な真ん中寄せのスライダーが完成しました！

スライドが中央からずれる場合の対処法

スライドが中央からずれてしまう場合もありますよね。その原因と対処法を見ていきましょう。

スライダーがずれる原因と解決策

スライドが思っているような位置に来てくれない時はpaddingやmargin、gap等の余白をつけるCSSをプラスしてしまってその分ずれてしまっているということが多いです。

Swiperのオプションで余白についてのオプションも用意してありますので余白の調整がしたいときはJavaScriptの部分で設定を行うように気を付けましょう！

真ん中のスライドを大きく表示する方法

真ん中のスライドだけ大きく見せたい！っていうこともありますよね。
実務でもよくあります

真ん中のスライドを大きく表示した実装例

この表示は基本的にCSSで調整すればOKです。

HTML

<div class="overflow-hidden"><!--スタイル調整用のdiv-->
  <div class="swiper-container2"><!--Swiper-->
      <div class="swiper-wrapper">
          <div class="swiper-slide"><img src="https://nakaemon.net/demo/img/cat01.webp"></div>
          <div class="swiper-slide"><img src="https://nakaemon.net/demo/img/cat02.webp"></div>
          <div class="swiper-slide"><img src="https://nakaemon.net/demo/img/cat03.webp"></div>
  <div class="swiper-slide"><img src="https://nakaemon.net/demo/img/cat01.webp"></div>
          <div class="swiper-slide"><img src="https://nakaemon.net/demo/img/cat02.webp"></div>
          <div class="swiper-slide"><img src="https://nakaemon.net/demo/img/cat03.webp"></div>
      </div>
  </div>
</div>

JavaScript

const swiper2 = new Swiper('.swiper-container2', {
    centeredSlides: true,//真ん中寄せ
    slidesPerView: 3,//枚数指定
    spaceBetween: 40,//余白40px
    loop: true,//繰り返す
});

CSS

transform: scale(1.2)でスライドを大きくできます！

.swiper-container2 .swiper-slide-active {//真ん中のスライド
    transform: scale(1.2);//1.2倍の大きさに
　　transition-duration:0.3s;//変化の時間0.3秒
}
.overflow-hidden{//スタイル調整
    overflow: hidden;
    padding: 30px 0;//Swiperの上部分がoverflow:hidden;で隠れないようにpadding追加
}

ちなみに.overflow-hidden;のpaddingがないと下の写真のように上部分がoverflow:hidden;で隠れますので、うまく調整して切れないようにしてみてください！

1枚目のスライドを中央に固定する方法

1枚目のスライドを中央に固定して表示したい場合は、以下の設定を試してみてください。

特定のスライドを中央に設定する方法

initialSlideオプションを使うことで、最初に表示されるスライドを指定できます。1枚目を中央に表示するためには、以下のように設定します。

特定のスライドを中央に設定した実装例

HTML

<div class="swiper-container3">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="https://nakaemon.net/demo/img/cat01.webp"></div>
        <div class="swiper-slide"><img src="https://nakaemon.net/demo/img/cat02.webp"></div>
        <div class="swiper-slide"><img src="https://nakaemon.net/demo/img/cat03.webp"></div>
<div class="swiper-slide"><img src="https://nakaemon.net/demo/img/cat01.webp"></div>
        <div class="swiper-slide"><img src="https://nakaemon.net/demo/img/cat02.webp"></div>
        <div class="swiper-slide"><img src="https://nakaemon.net/demo/img/cat03.webp"></div>
    </div>
</div>

JavaScript

const swiper3 = new Swiper('.swiper-container3', {
    centeredSlides: true,
    slidesPerView: 3,
    initialSlide: 0,
    loop: false,
    spaceBetween: 20,
});

ループ設定との兼ね合い

ループ設定を有効にするときも、1枚目のスライドを中央に固定することができます。
loop:trueにするとスライドショーが途切れることなくループします。

Swiperでスライドを中央寄せにする方法のまとめ

この記事のポイントをまとめます。

centeredSlidesオプションを使って簡単にスライドを中央寄せに設定できる。
スライドが中央からずれる場合は、CSSや設定を見直す。
真ん中のスライドを大きく見せるには、CSSの調整を使う。
1枚目のスライドを中央に固定するには、initialSlideオプションを使う。

Swiperでスライドを中央に寄せることで、より魅力的なデザインに仕上がるので、ぜひ試してみてくださいね！

ブログ一覧へ