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

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

こんにちは。

ゆうや(@yuyaphotograph)です!

この記事では、

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

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

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

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

特徴と完成イメージ

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

▼▼▼

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,
    // }
  });

});

まとめ

以上、実践的なSwiper.jsのカスタマイズ方法を紹介しました。

最後にもう一度特徴をおさらいしましょう。

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

ぜひ作ってみてください!

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

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

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です