Swiper.jsでテキストをスライドする方法

2024.03.20 2024.08.16

Swiper.jsでテキストをスライドする方法です。

Swiper.jsでテキストをスライドする方法

Swiper（Swiper.js）は、簡単にスライダーが作れるJavaScriptのプラグインです。トップページにスライドショーを実装しているサイトはたくさんありますね。

もう３年くらい前になりますが「お知らせをスライド表示したい」というお客様の要望があり、Swiperを使ってテキストスライダーを作りました。

せっかくなんで、停止ボタン付けて、次へ、前へと、任意にテキストをスライドできるようにしました。他でも使えそうなものになったので、記事にしておきます。

ここでは Swiperを使ってテキストをスライドする方法 を紹介します。

先に動作を確認したい方はデモページをどうぞ。

Swiper.jsでテキストをスライドするデモページはこちら

1 実行環境
2 Swiperでテキストスライダーを作る
3 まとめ

実行環境

今回は下記の環境で構築しました。

Bootstrap 4.4.1
Swiper 4.5.1

後ほど紹介するサンプルでは、レスポンシブ対応されていません。ブラウザの幅が狭い場合にはテキストスライダーが表示されないので注意してください。

Swiperでテキストスライダーを作る

それでは、Swiperでテキストスライダーを作る方法を紹介します。

Swiperの読み込み

まずはSwiperを読み込みます。


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/css/swiper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.2.1/js/swiper.min.js"></script>

枠組みを作る

次に、テキストをスライドする枠組みを作ります。


<section class="text-slider">
  <div class="container-md">
    <div class="text-slider-inner">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <a class="news-link" href="【リンク先】">
              <time class="news-date" datetime="【日付】>【日付】</time>
              <span class="news-text">スライドさせるテキスト</span>
            </a>
          </div>
        </div>
      </div>
      <div class="pagination-wrap">
        <div class="swiper-button-prev swiper-button-white"></div>
        <div class="stopbtn stop"></div>
        <div class="swiper-button-next swiper-button-white"></div>
      </div>
    </div>
  </div>
</section>

「class="swiper-slide"」を複数作れば、あとは勝手にSwiperがスライドしてくれます。

補足として、リンク先、日付、スライドさせるテキストを任意のものに変更します。

Swiperの動作を記述する

Swiperの動作をコードにします。


var textSwiper = new Swiper ('.text-slider .swiper-container', {
  slidesPerView: 1,
  loop: true,
  speed: 1000,
  autoplay: {
    delay: 3000,
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  }
});

speed、delayは、任意に書き換えてください。

停止・開始の動作を記述する

最後に、停止と開始の動作を記述します。


$(window).on('load', function() {
  $('.stopbtn').on('click', function() {
    var _class = $(this).attr('class');
    if (_class == 'stopbtn stop') {
      $(this).addClass('start').removeClass('stop');
      textSwiper.autoplay.stop();
    } else {
      $(this).addClass('stop').removeClass('start');
      textSwiper.autoplay.start();
    }
  });
});

以上でコードの記述はおしまいです。

サンプル

「Swiper.jsでテキストをスライドするサンプルはこちら」に用意しているので参考にどうぞ。

コードは自由に使ってもらってOKです。ただし、自己責任でお願いします。

レスポンシブ対応はしていません。スマホでは非表示になります。

まとめ

Swiperを使ってテキストをスライドする方法を紹介しました。

Swiperってめちゃくちゃ便利ですよね。ライブラリにとらわれないプラグインってのも魅力です。

皆さんも試してみてください。

おつかれさまでした。