WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： ノムさん
カテゴリー： プログラム >JavaScript

以前の投稿記事で「アクセシビリティに配慮したカルーセルスライダーの作り方」をご紹介しました。
今回はそれに関連した、１つのボタンでスライダーの再生停止が切り替わるボタンを設置、さらにそのデザインをcssで整えていく方法をご説明いたします。

サンプル

See the Pen
【jQuery】一時停止ボタンがついたスライドの作り方 by qam (@qam)
on CodePen.

今回は再生と一時停止の切り替えを１つのボタンでおこなえる仕様です。
スライダーの中身に文字と背景色を敷いたものを入れましたが、もちろん画像でも大丈夫です。

作成方法

以下より作成するにあたって大事な部分について説明していきます。

html

スライダーとボタンを作ります。

<div class="slider">
　<div class="slider_cont bg_pink">img01</div>
　<div class="slider_cont bg_blue">img02</div>
　<div class="slider_cont bg_yellow">img03</div>
　<div class="slider_cont bg_green">img04</div>
</div>
<div class="play_button_wrap">
　<button class="slick_pause btn"></button>
</div>

CSS

ボタンのデザインをCSSで作っていきます。
お好みによってボタンの大きさや色等は変えてください。

.btn {
  width: 30px;  /* 幅を指定 */
  height: 30px;  /* 高さを指定 */
  background-color: #fff;  /* 背景色を指定 */
  border-radius: 50%; /* 角を丸くする */
  position: relative;  /* 基準位置とする */
  cursor: pointer;     /* マウスカーソルを指の形にする */
  border: solid 2px #000;     /* 枠線を指定 */
}

/* 一時停止 */
.btn::after {
  content: ''; /* 疑似要素に必須 */
  width: 5px;  /* 幅を指定 */
  height: 13px; /* 高さを指定 */
  border-width: 0 3px 0 3px; /*線を左右に指定*/
  border-color: transparent #000 transparent #000;  /* 左右に線の色を指定 */
  border-style: solid;  /* 線の種類を指定 */
  position: absolute; /* 相対位置に指定 */
  top: 50%;  /* 上から50%の位置に配置 */
  left: 50%; /* 左から50%の位置に配置 */
  transform: translate(-50%,-50%); /* 要素の半分ぶんだけ左上方向に移動。 */
}

/* 再生 */
.btn.playback::after {
  width: 0;    /* 幅を0に指定 */
  height: 0;   /* 高さを0に指定 */
  border-width: 5px 0 5px 10px;  /* 線の幅を指定して三角を作る */
  border-color: transparent transparent transparent #000; 
	 /* 左のみ線の色を指定 */
}

Javascript

まずスライダーの設定をおこないます。

  $('.slider').slick({
    autoplay: true,       //自動再生
    autoplaySpeed: 2000,  //自動再生のスピード
    speed: 800,           //スライドするスピード
    infinite: true,       //永久にループさせる
    slidesToShow: 1, // 表示させるスライド数
    centerMode: true,
  });

次にボタンをクリックするとスライダーの再生と一時停止が切り替わる設定を書いていきます。

  
$(".slick_pause").on("click", function() {
    //一時停止中なら
    if($(this).hasClass("paused")){
      //再開
      $(".slider").slick("slickPlay");
      //「.paused」削除
      $(this).removeClass("paused");
    }else{
      //再生中なら
      //一時停止
      $(".slider").slick("slickPause");
      //「.paused」付与
      $(this).addClass("paused");
    }
  });

最後にクリックするとボタンのデザインが切り替わる設定を書いていきます。

$(function () {
    $('.btn').on('click', function(){  // クリックされた時
      $(this).toggleClass('playback'); // クラスを 付与する or 外す
    });
  });

まとめ

いかがでしたでしょうか？ウェブアクセシビリティに対応したスライダーには一時停止ボタンの設置が有効ですし、操作が分かりやすいホームページはユーザーに安心感や信頼感を与えることにも繋がりますので、ぜひ試してみてください。