【Swiperカスタマイズ】ページネーション設置と画像ではなくテキストオンリーでスライドを作る方法

こんにちは。

ゆうや（@yuyaphotograph）です！

この記事では、

Swiper.jsで初期状態で画像が3枚表示されるスライドショーを作る方法が知りたい
Swiper.jsでスライド間の余白を指定したい
Swiper.jsで画像ではなく文章の塊をスライドコンテンツにしたい
Swiper.jsでページネーション（中黒）を表示させたい
コピペでOKなSwiper.jsのサンプルコードを探している

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

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

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

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

特徴と完成イメージ

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

▼▼▼

1度は目にしたことがあるデザインではないでしょうか。

以下が特徴です。

1枚目のスライドは中央配置
スライド間の余白をあける
3枚のスライドが表示されている
スライド下に中黒（・）が表示されている（ページネーション）
中黒をクリックすると該当のスライドまで移動する

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

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

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

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

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

レスポンシブはまだ対応しておりません。

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

See the Pen
XWXoBex 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-Box">
            <p class="Inner-Card-Wrapper-Slide-Item-Box-Title">タイトル</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-Box">
            <p class="Inner-Card-Wrapper-Slide-Item-Box-Title">タイトル</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-Box">
            <p class="Inner-Card-Wrapper-Slide-Item-Box-Title">タイトル</p>
            <p class="Inner-Card-Wrapper-Slide-Item-Box-Text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
          </div>
        </div>
      </div>
    </div>
    <div class="swiper-pagination"></div>
  </div>
</div>

CSS

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

画像横幅や縦横比、スライドの背景色などはよしなに変更してお使いください。

CSS

.Inner {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.Inner-Card {
  padding-top: 80px;
  padding-bottom: 80px;
  width: 100%;
  background: #5bc8ac;
}
.Inner-Card-Wrapper {
  display: flex;
}
.Inner-Card-Wrapper-Slide {
  width: 54% !important;
  padding: 40px 60px;
  background: #fff;
}
.Inner-Card-Wrapper-Slide-Item {
  width: 100%;
}
.Inner-Card-Wrapper-Slide-Item-Box-Title {
  font-size: 18px;
}
.Inner-Card-Wrapper-Slide-Item-Box-Text {
  margin-top: 24px;
  line-height: 1.8;
  font-size: 16px;
}
.swiper-pagination-bullet {
  background: green;
  opacity: 1;
}
.swiper-pagination-bullet-active {
  background: #fff;
}

Swiperの設定（JS）

Swiperの設定です。

中黒はpaginationを設定すると表示されるようになります。

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

スライドを自動再生させたい場合は、コメントアウトされているautoplay部分をコメントインしてください。

sample.js

$(function(){

  var swiper = new Swiper('.swiper-container', {
    loop: true,
    slidesPerView: 'auto',
    centeredSlides: true,
    spaceBetween: 60,
    pagination: {
      el: '.swiper-pagination',
      type: 'bullets',
      clickable: true,
    },
    // autoplay: {
    //   delay: 2000,
    // }
  });

});