jQueryでスライダー作成その③
〜ボタンの表示・非表示切り替えとインジケータ機能追加〜

2021年10月5日2022年10月16日

URLをコピーしました！

今回の記事は、「jQueryでスライダー作成その② 」の続きです。

前回作成したスライダーに新しく機能を追加してみました。

追加した機能

追加した機能は以下の通りです。

マウスの動きに合わせて、ボタンの表示・非表示を切り替え
画像が何枚目なのか視覚的にわかりやすいナビを追加(インジケータ)

早速作っていきます！

完成コード

タブメニューになっているので切り替えると、HTML・CSS・jQueryのコードが表示されます。

完成コードはこちらです↓

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>
      コンテンツスライダー③
    </title>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <div class="l-container" id="js-sliderContent">
      <h1 class="m-pageTitle">
        コンテンツスライダー③<br />
        <span>
          不具合により自動再生されない場合があります。<br />
          その場合、ブラウザを何度かリロードお願いいたします。
        </span>
      </h1>
      <div class="m-sliderArea">
        <div class="m-sliderWrap">
          <ul class="js-slider m-slider">
            <li class="js-sliderItem m-slider__item">
              <img src="images/grape.jpg" alt="ぶどう" />
            </li>
            <li class="js-sliderItem m-slider__item">
              <img src="images/apple.jpg" alt="りんご" />
            </li>
            <li class="js-sliderItem m-slider__item">
              <img src="images/lemon.jpg" alt="レモン" />
            </li>
            <li class="js-sliderItem m-slider__item">
              <img src="images/pineapple.jpg" alt="パイナップル" />
            </li>
            <li class="js-sliderItem m-slider__item">
              <img src="images/strawberry.jpg" alt="いちご" />
            </li>
          </ul>
        </div>
        <!-- /.m-sliderWrap -->
        <ul class="m-sliderNav" id="js-sliderNav">
          <li class="m-sliderNav__item">
            <button class="m-button --slider --prev" id="js-sliderPrevButton">
              <span class="u-visuallyHidden">前へ</span>
            </button>
          </li>
          <li class="m-sliderNav__item">
            <button class="m-button --slider --next" id="js-sliderNextButton">
              <span class="u-visuallyHidden">次へ</span>
            </button>
          </li>
        </ul>
      </div>
      <!-- /.m-sliderArea -->
    </div>
    <!-- /.l-container -->

    <script
      src="https://code.jquery.com/jquery-1.12.4.min.js"
      integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
      crossorigin="anonymous"
    ></script>
    <script src="app.js"></script>
  </body>
</html>

/* Reset.css */
* {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

img {
  vertical-align: bottom;
}

/* 変数 */

.u-visuallyHidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Layout */
.l-container {
  width: 1000px;
  margin: 3em auto 0;
}

/* Module */

.m-pageTitle {
  text-align: center;
}

.m-pageTitle span {
  font-size: 0.5em;
}

.m-sliderArea {
  position: relative;
  margin-top: 3em;
  padding: 0.5em;
  background-color: #333;
}

.m-sliderWrap {
  overflow: hidden;
}

.m-slider {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.m-button.--slider {
  position: absolute;
  inset: 0 auto 0 auto;
  margin: auto 0;
  height: 5em;
  width: 5em;
  border-radius: 50%;
  border: none;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 0 10px #333;
}

.m-button.--slider:active {
  box-shadow: none;
}

.m-button.--slider::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 1em;
  height: 1em;
  border: 2px solid #333;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.m-button.--prev {
  left: -2.5em;
}

.m-button.--prev::before {
  border-top: none;
  border-right: none;
  /* widthの半分 */
  left: 0.5em;
}

.m-button.--next {
  right: -2.5em;
}

.m-button.--next::before {
  border-bottom: none;
  border-left: none;
  /* widthの半分 */
  right: 0.5em;
}

.m-indicator {
  display: flex;
  justify-content: center;
  margin-top: 2em;
}

.m-indicator__item + .m-indicator__item {
  margin-left: 1em;
}

.m-button.--indicator {
  font-size: 16px;
  width: 1.5em;
  height: 1.5em;
  border: none;
  border-radius: 50%;
  box-shadow: 0 0 5px #000;
}

.m-button.--indicator:active {
  box-shadow: none;
}

.m-button.is-sliderActive {
  position: relative;
}

.m-button.is-sliderActive::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  background-color: #000;
}

$(function () {
  /*=================================================================== 
                        オプション
   ==================================================================*/
  var buttonfadeSpeed = 300; //ボタンの表示・非表示時間
  var slideSpeed = 350; //スライドの切り替え時間
  var slideDelay = 3000; //自動再生の待機時間
  var slideAutoPlay = true; //自動再生の有無

  //タイマー管理用変数を宣言
  var slideTimer;
  //現在のコンテンツ番号を変数で管理
  var index = 0;

  /*===================================================================
                      コンテンツの幅を自動設定
    ==================================================================*/
  //スライドコンテンツの数を取得
  var slideCount = $(".js-sliderItem").length;
  //スライドコンテンツの幅を取得
  var slideWidth = $(".js-sliderItem").width();
  //スライドコンテンツを横並びにするために必要な幅を計算
  var slideTotalWidth = slideWidth * slideCount;
  //計算した幅をjs-sliderに指定
  $(".js-slider").width(slideTotalWidth);

  /* =====================================================================
                        インジケータ
   ======================================================================*/
  //インジケータ部分をJSで追加
  $("#js-sliderContent").append(
    "<ol class='m-indicator' id='js-indicator'></ol>"
  );
  //コンテンツの数だけ繰り返し
  for (var i = 0; i < slideCount; i++) {
    var indicatorItem =
      "<li class='m-indicator__item'><button class='js-indicatorButton m-button --indicator' data-id=" +
      i +
      "><span class='u-visuallyHidden'>" +
      i +
      "</span></button></li>";

    //js-indicatorの末尾にコンテンツの数だけ要素を追加
    $("#js-indicator").append(indicatorItem);
  }
  //インジケータボタンに追加するclass属性を変数にまとめる
  var sliderActive = "is-sliderActive";
  //data-id属性の値が0のインジケータボタンにclass属性を追加
  $(".js-indicatorButton[data-id='0']").addClass(sliderActive);

  /*===========================================================================
                          共通処理を関数化
    ==========================================================================*/
  //目的のコンテンツまでスライドする独自関数を作成
  function sliding() {
    //class属性を削除
    $(".js-indicatorButton").removeClass(sliderActive);
    //現在のコンテンツ番号が0より小さいかをチェック
    if (index < 0) {
      //0より小さい時
      index = slideCount - 1;
    }
    //現在のコンテンツ番号がコンテンツの数以上かチェック
    if (index > slideCount - 1) {
      //コンテンツの数より大きいか
      index = 0;
    }

    //leftの値をアニメーションで変更
    $(".js-slider")
      .stop()
      .animate(
        {
          left: index * -slideWidth
        },
        slideSpeed
      );
    //表示中の画像と対応しているインジケータにclass属性を追加
    $(".js-indicatorButton[data-id=" + index + "]").addClass(sliderActive);
  }
  //自動再生の処理を行う独自関数
  function slideSetTimer() {
    //自動再生が有効かチェック
    if (slideAutoPlay) {
      //有効の時
      //自動再生の処理
      slideTimer = setInterval(function () {
        index++;
        sliding();
      }, slideDelay);
    }
  }

  //自動再生の関数を呼び出し
  slideSetTimer();

  /*================================================================= 
                          マウスの動きに合わせた処理
  =================================================================*/

  //マウスが乗っている間は自動再生を停止
  $(".js-slider").hover(
    //マウスが乗っている時
    function () {
      clearInterval(slideTimer);
      $("#js-sliderNav").stop().fadeOut(buttonfadeSpeed);
    },
    //マウスが離れた時
    function () {
      slideSetTimer();
      $("#js-sliderNav").stop().fadeIn(buttonfadeSpeed);
    }
  );

  /*===============================================================
                          ボタンに関する処理
   ===============================================================*/

  //「前へ」ボタンを押した時の処理
  $("#js-sliderPrevButton").click(function () {
    clearInterval(slideTimer);
    //現在のコンテンツ番号に1を引く
    index--;
    sliding();
    slideSetTimer();
  });
  //「次へ」ボタンを押した時の処理
  $("#js-sliderNextButton").click(function () {
    clearInterval(slideTimer);
    //現在のコンテンツ番号に1を足す
    index++;
    sliding();
    slideSetTimer();
  });

  // インジケータボタンを押した時の処理
  $(".js-indicatorButton").click(function () {
    clearInterval(slideTimer);
    //クリックしたインジケータボタンのdata-id属性を変数で管理
    var indicatorId = $(this).attr("data-id");
    //コンテンツ番号をindicatorIdの値に置き換え
    index = indicatorId;
    sliding();
    slideSetTimer();
  });
});

CodeSandBox で簡単なデモページを作成しました！

※1レスポンシブには対応していないので、恐れ入りますがPCからご覧ください。

※2不具合で自動再生が機能しない可能性があります。その場合、ブラウザを何度かリロードお願いいたします。

ボタンのデザイン変更

HTMLの構造変更

まず、ボタンのデザインを変更します。

変更点はこちら↓

・ボタンを囲ってるul要素にid属性js-sliderNavを追加。

・m-sliderWrapとm-sliderNavをclass属性m-sliderAreaを持つdiv要素で囲む。

・button要素にclass属性—sliderを付ける。

・button要素内のコンテンツをclass属性u-visuallyHiddenを持つspan要素で囲み、

CSSで見た目上、見えないよう装飾する。

<div class="m-sliderArea">
	<div class="m-sliderWrap">
	  <ul class="m-slider" id="js-slider">
	    <li class="js-sliderItem m-slider__item">
	      <img src="images/photo-mountain.jpg" alt="ぶどう" />
       </li>
       <li class="js-sliderItem m-slider__item">
         <img src="images/photo-river.jpg" alt="りんご" />
	     </li>
       <li class="js-sliderItem m-slider__item">
         <img src="images/photo-sea.jpg" alt="レモン" />
       </li>
       <li class="js-sliderItem m-slider__item">
         <img src="images/photo-town.jpg" alt="パイナップル" />
       </li>
       <li class="js-sliderItem m-slider__item">
          <img src="images/photo-sky.jpg" alt="いちご" />
        </li>
      </ul>
    </div>
    <!-- /.m-sliderWrap -->
    <ul class="m-sliderNav" id="js-sliderNav">
	    <li class="m-sliderNav__item">
	      <button class="m-button --slider --prev" id="js-sliderPrevButton">
	        <span class="u-visuallyHidden">前へ</span>
        </button>
      </li>
      <li class="m-sliderNav__item">
        <button class="m-button --slider --next" id="js-sliderNextButton">
		      <span class="u-visuallyHidden">次へ</span>
        </button>
        </li>
     </ul>
</div>
<!-- /.m-sliderWrap -->

ボタンを装飾

ボタンを円形にし、button要素内のコンテンツを矢印に変更します。

ボタンの位置は、画像の上下中央を基準に、

「前へ」ボタンは画像の左側に、「次へ」ボタンは画像の右側に配置させます。


.m-sliderArea {
    position: relative;
    padding: .5em;
    background-color: #333;
}

.m-button.--slider {
    position: absolute;
    inset: 0 auto 0 auto;
    width: 5em;
    height: 5em;
    margin: auto 0;
    border: none;
    border-radius: 50%;
    box-shadow: 0 0 10px #333;
    font-size: 16px;
    cursor: pointer;
}

.m-button.--slider:active {
    box-shadow: none;
}


.m-button.--slider::before {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 1em;
    height: 1em;
    border: 2px solid #333;
    transform: rotate(45deg);
}

.m-button.--prev {
    left: -2.5em;
}

.m-button.--prev::before {
    left: .5em;
    border-top: none;
    border-right:none ;
}

.m-button.--next {
    right: -2.5em;
}

.m-button.--next::before {
    right: .5em;
    border-bottom: none;
    border-left:none ;
}

ボタンの表示・表示切り替え

マウスの動きに合わせて、ボタンの表示・非表示を切り替えます。

切り替えるスピードは変数で管理します。

切り替えるときの条件がこちら↓

・コンテンツの上にマウスが乗ったら、ボタンを非表示

・コンテンツの上からマウスが離れたら、ボタンを表示

//ボタンの表示・非表示切り替え時間
var buttonFadeSpeed = 300;

//マウスの動きに合わせた処理
$(".js-sliderItem").hover(
	function () {
     //マウスが乗っている時
	   //ボタンを非表示
     $("#js-sliderNav").fadeOut(buttonFadeSpeed);
     
      clearInterval(slideTimer);
	   }, 
	function () {
      //マウスが離れた時
      //ボタンを表示
      $("#js-sliderNav").fadeIn(buttonFadeSpeed);
      slideSetTimer();
     }
);

インジケータ機能を追加

現在表示している画像が何枚目なのか、分かりやすいナビ機能を追加します。

インジケータに必要な要素をJSで追加

コンテンツの数が増減するとそれに合わして、インジケータも増減できるようにJavaScriptで

必要な要素を追加します。

追加するときの要件は以下の通りです↓

・l-containerにid属性js-sliderContentを追加する。

・js-sliderContentの末尾にclass属性m-indicator、

id属性js-indicatorを持つul要素を追加する。

・for文を使ってコンテンツの数だけul要素内にli>button>spanを追加する。

・button要素にカスタムデータ属性を追加する。

<div class="l-container" id="js-sliderContent">
	<!--中身省略-->     
</div>
<!-- /.l-container -->

 //インジケータ部分をJSで追加
 $("#js-sliderContent").append(
    "<ol class='m-indicator' id='js-indicator'></ol>"
 );
 //コンテンツの数だけ繰り返し
 for (var i = 0; i < slideCount; i++) {
    var indicatorItem =
      "<li class='m-indicator__item'><button class='js-indicatorButton m-button --indicator' data-id=" +
      i +
      "><span class='u-visuallyHidden'>" +
      i +
      "</span></button></li>";

    //js-indicatorの末尾にコンテンツの数だけ要素を追加
    $("#js-indicator").append(indicatorItem);
  }

自動再生と対応してインジケータボタンにclass属性を追加

まず、data-id属性が0のインジケータボタンにclass属性is-sliderActiveを付けます。

次に、自動再生の関数内の先頭で、

一度インジケータボタンについているclass属性を削除します。

そして、関数内の末尾で、表示中の画像と対応しているインジケータボタンに、

class属性を追加します。

また、CSSでインジケータボタンのレイアウトと、class属性が付いているインジケータボタンを目立たせます。

.m-indicator {
    display: flex;
    justify-content: center;
    padding-top: 2em;
}

.m-indicator__item+.m-indicator__item {
    margin-left: 1em;
}

.m-button.--indicator {
    font-size: 16px;
    width: 1.5em;
    height: 1.5em;
    border: none;
    border-radius: 50%;
    box-shadow: 0 0 5px #000;
}

.m-button.--indicator:active {
    box-shadow: none;
}

.m-button.is-sliderActive {
    position: relative;
}

.m-button.is-sliderActive::before {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    background-color: #000;
}

//インジケータボタンに追加するclass属性を変数にまとめる
var sliderActive = "is-sliderActive";
//data-id属性が0のインジケータボタンにclass属性を追加
$(".js-indicatorButton[data-id='0']").addClass(sliderActive);

//目的のコンテンツまでスライドする独自関数
function sliding() {
  //class属性を削除
  $(".js-indicatorButton").removeClass(sliderActive);

  if (index < 0) {
    index = slideCount - 1;
   }
  if (index > slideCount - 1) {
    index = 0;
   }
  $("#js-slider").stop().animate({
	  left: -slideWidth * Math.abs(index)
	  },slideSpeed);
	//表示中の画像と対応しているインジケータボタンにclass属性を追加
  $(".js-indicatorButton[data-id=" + index +"]").addClass(sliderActive);

}

インジケータボタンのクリックイベント

インジケータボタンのクリックイベントを作成します。

クリックイベント内の処理の流れは以下の通りです。

1.自動再生停止

2.クリックしたインジケータボタンのdata-id属性の値を取得

3.コンテンツ番号を取得したdata-id属性の値に変更

4.sliding()を呼び出す

5.自動再生を再開

// インジケータボタンを押した時の処理
$(".js-indicatorButton").click(function () {
    clearInterval(slideTimer);
    //クリックしたインジケータボタンのdata-id属性を変数で管理
    var indicatorId = $(this).attr("data-id");
    //コンテンツ番号をindicatorIdの値に置き換え
    index = indicatorId;
    sliding();
    slideSetTimer();
 });

まとめ

以上でボタンの表示・非表示切り替えとインジケータ機能の追加ができました。

最後まで読んでいただきありがとうございました！

前回の記事はこちら↓

・jQueryでスライダー作成その①

・jQueryでスライダーを作成その②〜自動再生機能の追加とメンテナンス性の向上〜

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！

jQueryでスライダー作成その③〜ボタンの表示・非表示切り替えとインジケータ機能追加〜