【Swiperカスタマイズ】1枚目のスライドの中央配置と初期状態で3つのスライドを表示する方法

こんにちは。

ゆうや（@yuyaphotograph）です！

この記事では、

Swiper.jsで初期状態で画像が3枚表示されるスライドショーを作る方法が知りたい
Swiper.jsでスライド間の余白を指定したい
Swiper.jsで画像をimgタグではなくdivタグで実装したい
Swiper.jsで表示させる画像の縦横比を自由自在に操りたい

という方のお悩みを解決します！

今回、紹介するサンプルコードはぼくがかつて、実際のWebサイト制作案件で使用したものです。

実装しようとしてググったときに、何記事か惜しいものはありましたが、ピンポイントで上記を満たしてくれるサンプルコードはありませんでした。

スライドの1枚目の画像を中央配置する方法が特に見つかりませんでした笑

結局そこは昔関わった案件のコードを参考にしたら実現できました。

同じ様な機能のSwiperカスタマイズのコーディングで躓いている方の助けになれれば幸いです！！

特徴と完成イメージ
スライドショーのサンプルコード
まとめ

特徴と完成イメージ

今回紹介するコードで実現できるスライドショーのデザインはこちら！

▼▼▼

1度は目にしたことがあるデザインですね。

以下が特徴です。

1枚目のスライドは中央配置
スライド間の余白をあける
3枚のスライドが表示されている

以下で紹介するコードをお使いいただければ、とりあえず見た目だけは秒で再現できます！

それでは見ていきましょう〜〜

＊Swiper.jsを導入していることを前提とした記事となります

スライドショーのサンプルコード

こちら、CodePenで作った見本です！

この画面だと本来のPCサイズで表示されないので、ぜひCodePenのページへ行って確かめてみていただきたいでありんす。

See the Pen
gOPZevw by 石森裕也 (@yuyaphotograph)
on CodePen.

HTML

こちら、スライドショーのHTML構造です！

スライドの数を増やしたい場合は、「swiper-slide」の塊を増やしてあげればOK！

肝は、「swiper-slide」の中に画像表示用のdivを作ることです！

HTML

<div class="Inner">
  <div class="swiper-container Inner-Card">
    <div class="swiper-wrapper Inner-Card-Wrapper">
      <div class="swiper-slide Inner-Card-Wrapper-Slide">
        <div class="Inner-Card-Wrapper-Slide-Item">
          <div class="Inner-Card-Wrapper-Slide-Item-ImgBox"><div class="Inner-Card-Wrapper-Slide-Item-ImgBox-Img" style="background: url('画像URL') no-repeat; background-position: center; background-size: cover;"></div></div>
        </div>
      </div>
      <div class="swiper-slide Inner-Card-Wrapper-Slide">
        <div class="Inner-Card-Wrapper-Slide-Item">
          <div class="Inner-Card-Wrapper-Slide-Item-ImgBox"><div class="Inner-Card-Wrapper-Slide-Item-ImgBox-Img" style="background: url('画像URL') no-repeat; background-position: center; background-size: cover;"></div></div>
        </div>
      </div>
      <div class="swiper-slide Inner-Card-Wrapper-Slide">
        <div class="Inner-Card-Wrapper-Slide-Item">
          <div class="Inner-Card-Wrapper-Slide-Item-ImgBox"><div class="Inner-Card-Wrapper-Slide-Item-ImgBox-Img" style="background: url('画像URL') no-repeat; background-position: center; background-size: cover;"></div></div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

こちらスライドショーのスタイリングです！

画像横幅や縦横比などはよしなに変更してお使いください。

CSS

.Inner {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.Inner-Card {
  margin-top: 80px;
  width: 100%;
}
.Inner-Card-Wrapper {
  display: flex;
}
.Inner-Card-Wrapper-Slide {
  width: 56%!important;/*スライドの横幅*/
}
.Inner-Card-Wrapper-Slide-Item {
  position: relative;
  width: 100%;
}
.Inner-Card-Wrapper-Slide-Item-ImgBox {
  width: 100%;
}
.Inner-Card-Wrapper-Slide-Item-ImgBox-Img {
  width: 100%;
  padding-top: 64%;/*スライドの縦横比*/
}

Swiperの設定（JS）

Swiperの設定です。

centerdSlidesをtrueにすることで1枚目のスライドの中央配置を実現しています。

spaceBetweenでスライド間の余白を指定します。（下記のコードの場合は40px）

sample.js

$(function(){

  var swiper = new Swiper('.swiper-container', {
    loop: true,
    slidesPerView: 'auto',//必須
    centeredSlides: true,//1枚目のスライド中央配置
    spaceBetween: 40//スライド間の余白
    // autoplay: {
    //   delay: 2000,
    // }
  });

});

おまけ：スライド上にテキスト挿入Ver

スライド上に任意のテキストを挿入したいときにはこちらをお使いください！

See the Pen
MWKZVBB by 石森裕也 (@yuyaphotograph)
on CodePen.

HTML

<div class="Inner">
  <div class="swiper-container Inner-Card">
    <div class="swiper-wrapper Inner-Card-Wrapper">
      <div class="swiper-slide Inner-Card-Wrapper-Slide">
        <div class="Inner-Card-Wrapper-Slide-Item">
          <div class="Inner-Card-Wrapper-Slide-Item-ImgBox"><div class="Inner-Card-Wrapper-Slide-Item-ImgBox-Img" style="background: url('画像URL') no-repeat; background-position: center; background-size: cover;"></div></div>
          <div class="Inner-Card-Wrapper-Slide-Item-Box">
            <p class="Inner-Card-Wrapper-Slide-Item-Box-Text">テキスト</p>
            <p class="Inner-Card-Wrapper-Slide-Item-Box-Text">テキストテキスト</p>
          </div>
        </div>
      </div>
      <div class="swiper-slide Inner-Card-Wrapper-Slide">
        <div class="Inner-Card-Wrapper-Slide-Item">
          <div class="Inner-Card-Wrapper-Slide-Item-ImgBox"><div class="Inner-Card-Wrapper-Slide-Item-ImgBox-Img" style="background: url('画像URL') no-repeat; background-position: center; background-size: cover;"></div></div>
          <div class="Inner-Card-Wrapper-Slide-Item-Box">
            <p class="Inner-Card-Wrapper-Slide-Item-Box-Text">テキスト</p>
            <p class="Inner-Card-Wrapper-Slide-Item-Box-Text">テキストテキスト</p>
          </div>
        </div>
      </div>
      <div class="swiper-slide Inner-Card-Wrapper-Slide">
        <div class="Inner-Card-Wrapper-Slide-Item">
          <div class="Inner-Card-Wrapper-Slide-Item-ImgBox"><div class="Inner-Card-Wrapper-Slide-Item-ImgBox-Img" style="background: url('画像URL') no-repeat; background-position: center; background-size: cover;"></div></div>
          <div class="Inner-Card-Wrapper-Slide-Item-Box">
            <p class="Inner-Card-Wrapper-Slide-Item-Box-Text">テキスト</p>
            <p class="Inner-Card-Wrapper-Slide-Item-Box-Text">テキストテキスト</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

.Inner {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.Inner-Card {
  margin-top: 80px;
  width: 100%;
}
.Inner-Card-Wrapper {
  display: flex;
}
.Inner-Card-Wrapper-Slide {
  width: 56% !important;
}
.Inner-Card-Wrapper-Slide-Item {
  position: relative;
  width: 100%;
}
.Inner-Card-Wrapper-Slide-Item-ImgBox {
  width: 100%;
}
.Inner-Card-Wrapper-Slide-Item-ImgBox-Img {
  width: 100%;
  padding-top: 64%;
}
.Inner-Card-Wrapper-Slide-Item-Box {
  position: absolute;
  left: 24px;
  bottom: 24px;
}
.Inner-Card-Wrapper-Slide-Item-Box-Text {
  margin: 0;
  padding: 8px;
  display: table;
  background: #5bc8ac;
  color: #fff;
  font-size: 16px;
}
.Inner-Card-Wrapper-Slide-Item-Box-Text:nth-child(2) {
  margin-top: 8px;
}

まとめ

以上、Swiper.jsで初期状態で3枚のスライドが表示されるスライドショーの作り方を紹介しました。

コーポレートサイトの制作案件をする際など必ずや！役立つスキルとなりますのでぜひ覚えていきましょう〜！

Swiper.jsカスタマイズに役立つ記事まとめ

コーディングスキルアップシリーズはこちら！