お問合せ
MENU

【解説】Swiperで余白を調整する方法 – spaceBetweenとカスタマイズ

コードのこと

Swiperの余白調整ってちょっとコツがいるので悩んでいる方も多いのではないかと思います。

今回は、Swiperで余白を上手に設定する方法についてお話しします。

Swiperの基本的な使い方

Swiperの基本ファイルの読み込みや実装するための書き方は以下の記事にまとめています。
はじめてSwiperでスライダーを実装する方はまず読んでみてくださいね。

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

Swiperで余白を調整するオプション

Swiperには余白を調整するためのオプションとしてspaceBetweenがあります。

実際の余白の設定

const swiper = new Swiper('.swiper-container', {
    spaceBetween: 20,  // スライド間に20pxの余白を設定
    slidesPerView: 2,
});

もし余白の単位をvwや%にしたい場合は’’や””で囲むようにしましょう。単位を付けない場合はpxとなります。

余白の設定の単位を指定する場合

const swiper = new Swiper('.swiper-container', {
    spaceBetween: '5%',  // スライド間に5%の余白を設定
});
const swiper = new Swiper('.swiper-container', {
    spaceBetween: '2vw',  // スライド間に5%の余白を設定
});

カスタムCSSを使った余白調整

spaceBetweenだけでは物足りないときは、カスタムCSSを使って余白を調整できます。特にpaddingを活用すると、スライドの位置ズレを防ぎながら余白を設定できます。

.swiper-slide {
    padding: 0 10px;  // 左右に10pxの余白を設定
}

これで、スライドが左右に10pxの余白を持ちながら配置されます。

Swiperの余白調整でmarginやpaddingは使わないのが無難です。

Swiperの余白調整でmarginは使わない事をおススメします…

以下のスライダーをスライドしてみると、スライドするたびに左側の開始位置がずれていくのが分かりますでしょうか？
さらに最後のスライドの端まで見ることができません…！
これがspaceBetweenオプションを使わず、marginやpaddingで余白調整をする懸念点です

↓marginで余白を付けてずれていくスライダー

marginでSwiperのスライドがずれる実際のコード

spaceBetweenオプションは使わずにmargin-right:30px;で余白を付けるとスライドするたびにずれていきます…

HTML

<div class="swiper-container2">
    <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/cat04.webp"></div>
        <div class="swiper-slide"><img src="https://nakaemon.net/demo/img/cat05.webp"></div>
    </div>
</div>

JavaScript

const swiper2 = new Swiper('.swiper-container2', {
slidesPerView: 2,
});

CSS

.swiper-container2 .swiper-slide{margin-right:30px;}

↓paddingで余白を付けてずれていくスライダー

paddingでSwiperのスライドがずれる実際のコード

spaceBetweenオプションは使わずにpadding-right:30px;で余白を付けてもスライドするたびにずれていきます…

<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/cat04.webp"></div>
        <div class="swiper-slide"><img src="https://nakaemon.net/demo/img/cat05.webp"></div>
    </div>
</div>
const swiper3 = new Swiper('.swiper-container3', {
slidesPerView: 2,
});
.swiper-container3 .swiper-slide{padding-right:30px;}

余白調整は不具合を起こさないようにSwiperのオプションであるspaceBetweenを使うようにしましょう！

Swiperの高さに余白ができる場合の対策

Swiperの高さに意図しない余白ができることがあります。これは、CSSの設定やSwiperの設定が原因です。

高さに余白が出来た時のCSS調整

.swiper-slide {
    height: calc(100% - 20px);  // 高さから余白分を差し引く
}

こうすることで、余白分を考慮した高さ設定ができます。

片側だけ余白を作る方法

片側に少し空白を入れたいということもありますよね。
そんな時はSwiperの基本要素にpadding-left:○○pxのようにCSSで余白を入れます。

HTML

<div class="swiper-container4"><!--padding-left:○○pxを当てる要素-->
    <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/cat04.webp"></div>
        <div class="swiper-slide"><img src="https://nakaemon.net/demo/img/cat05.webp"></div>
    </div>
</div>

CSS

.swiper-container4{padding-left:50px;}

JavaScript

const swiper4 = new Swiper('.swiper-container4', {
slidesPerView: 2,
spaceBetween: 20,
});

片側に余白があるスライダーの実際の表示

スライダーの一番最後に右余白を追加したい

ページいっぱいのスライダーだと右側ピッタリくっついて終わることもあるので少し余白が欲しいこともあります。そんな時は

HTML

<div class="swiper-container5"><!--padding-right:○○pxを当てる要素-->
    <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/cat04.webp"></div>
        <div class="swiper-slide"><img src="https://nakaemon.net/demo/img/cat05.webp"></div>
    </div>
</div>

CSS

.swiper-container5{padding-right:50px;}

JavaScript

const swiper5 = new Swiper('.swiper-container5', {
slidesPerView: 2,
spaceBetween: 20,
});

スライダーの一番最後に右余白を追加した実際の表示

Swiperで余白を調整する方法のまとめ

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

  • spaceBetweenを使って簡単にスライド間の余白を設定できる
  • marginやpaddingを使用すると、スライドがずれて見えるため避けるべき
  • 片側だけに余白を作りたい場合は.swiper-containerにpadding-leftなどを入れる
  • 最後のスライドに余白を追加する場合は.swiper-containerにpadding-rightなどを入れる

余白は基本的にはspaceBetweenオプションを使うのがおすすめです。
片側によはくを付けたい場合は.swiper-containerに適切なpaddingを付けるようにしてみてくださいね！

ブログ一覧へ