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

今回の記事は、「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>

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

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

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

ボタンのデザイン変更

HTMLの構造変更

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

変更点はこちら↓

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

m-sliderWrapm-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 -->

自動再生と対応してインジケータボタンに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;
}

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

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

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

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();
 });

まとめ

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

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

shibajukuで学習中

僕の先生:@hilosiva

shibajukuのブログ:Shibajuku – Webクリエイター養成所

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
目次