Swiper.jsでテキストをスライドする方法
Swiper.jsでテキストをスライドする方法です。
Swiper（Swiper.js）は、簡単にスライダーが作れるJavaScriptのプラグインです。トップページにスライドショーを実装しているサイトはたくさんありますね。
もう３年くらい前になりますが「お知らせをスライド表示したい」というお客様の要望があり、Swiperを使ってテキストスライダーを作りました。
せっかくなんで、停止ボタン付けて、次へ、前へと、任意にテキストをスライドできるようにしました。他でも使えそうなものになったので、記事にしておきます。
ここでは Swiperを使ってテキストをスライドする方法 を紹介します。
先に動作を確認したい方はデモページをどうぞ。
Swiper.jsでテキストをスライドするデモページはこちら
目次
実行環境
今回は下記の環境で構築しました。
- 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ってめちゃくちゃ便利ですよね。ライブラリにとらわれないプラグインってのも魅力です。
皆さんも試してみてください。
おつかれさまでした。