jQueryなしで動くレスポンシブ対応スライダー「swiper」に停止ボタンをつける

「swiper」とはjQuery不要でレスポンシブ対応のスライダーです。
しかも機能がもりだくさん、オプションの設定だけで様々なことが可能になります。
しかし、そんな死角なしの「swiper」に「停止ボタン」はありませんでした。
そんな「swiper」に停止ボタンをつける方法をご紹介します。
（個人的には「停止ボタン」は不要と思うんですが、ご要望がありましたので設置しました。）

Swiper実装方法

ファイルをダウンロードします。

公式サイト
「Download」から必要なファイルをダウンロードします。

ファイルを読み込みます。

以下のファイルを任意の場所で読み込みます。
・swiper.js（swiper.min.js）
・swiper.css（swiper.min.css）

<link rel="stylesheet" href="swiper.min.css">
<script src="swiper.min.js"></script>

HTMLにレイアウトを追加します。

<!-- スライダー全体を囲う -->
<div class="swiper-container">

<!-- スライドを囲う -->
<div class="swiper-wrapper">

<!-- スライド -->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
 ...
</div>

<!-- ページネーション（必要ならば） -->
<div class="swiper-pagination"></div>
 
<!-- ナビゲーションボタン（必要ならば） -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
 
<!-- スクロールバー（必要ならば） -->
<div class="swiper-scrollbar"></div>
</div>

swiper.cssにてSwiperのサイズ指定を行います。

.swiper-container {
  width: 600px;
  height: 400px;
}
.swiper-slide {
  width: 600px;
  height: 400px;
}

Swiperを初期化します。

</body>直前に記述すること

<script> 
var mySwiper = new Swiper ('.swiper-container', {
// オプション指定
direction: 'vertical',
loop: true,
 
// ページネーション（必要ならば）
pagination: '.swiper-pagination',
 
// ナビゲーション（必要ならば）
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
 
// スクロールバー（必要ならば）
scrollbar: '.swiper-scrollbar',
})
</script>

オプション設定については公式APIからご確認ください。
すごい量あります。

しかし「stop button」機能はない

のでつけてみました。
「jQueryなしで動く」スライダーなのに、jQueryを使って停止ボタンを追加しているというどうしようもなさですが、どうかご容赦いただきたい。

HTML

ナビゲーションとスクロールバーが不要のためdivを一部削除しています。

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide"><img src="img1.jpg" alt=""></div>
    <div class="swiper-slide"><img src="img2.jpg" alt=""></div>
    <div class="swiper-slide"><img src="img3.jpg" alt=""></div>
  </div>
  <div class="swiper-pagination"></div>

  <!-- 停止ボタン追加 -->
  <p class="stopbtn stop"></p>

</div>

JS

Swiper初期化に続いて追記してください。

$(window).load(function() {
  $(".stopbtn").on("click", function() {
    var _class = $(this).attr("class");
    if(_class == "stopbtn stop"){
      $(this).addClass("start").removeClass("stop");
      swiper.stopAutoplay();
    }
    else {
      $(this).addClass("stop").removeClass("start");
      swiper.startAutoplay();
    }
  });
});

「stopbtn」クラスが付いた要素をクリックした時、
もしクラスに「stopbtn」と「stop」があるならば
・「start」クラスを追加し「stop」クラスを削除
・swiperの自動再生をストップ
それ以外ならば
・「stop」クラスを追加し「start」クラスを削除
・swiperの自動再生をスタート

CSS

.swiper-container .stopbtn {
  cursor: pointer;
  position: absolute;
  bottom: 10px;
  right: 10px;
  z-index: 100;
  background: #007aff;
  width: 60px;
  height: 60px;
  border-radius: 10px;
  text-align: center;
  line-height: 60px;
  opacity: 0.85;
  color: #fff;
}
.swiper-container .stopbtn:hover {
  opacity: 1;
}
.swiper-container .stopbtn.stop:before {
  display: block;
  content: "=";
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  font-size: 24px;
  font-weight: bold;
}
.swiper-container .stopbtn.start:before {
  content: "▶";
}

デモ

デモはこちらからご覧ください。
swiperデモ