今回の記事は、「jQueryでスライダー作成その① 」の続きです。
コンテンツの自動再生機能の追加とメンテナンス性の向上について、
shibajukuで学習しましたので、記事にまとめました。
今回学習したこと
今回学習したことは、以下になります。
・一定間隔でコンテンツがスライドして切り替わる（自動再生）
・使い回しやすいスライダーを作成
早速作っていきます！
完成コード
タブメニューになっているので切り替えると、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">
<h1 class="m-pageTitle">コンテンツスライダー②</h1>
<div class="m-sliderWrap">
<ul class="m-slider" id="js-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">
<li class="m-sliderNav__item">
<button class="m-button --prev" id="js-sliderPrevButton">前へ</button>
</li>
<li class="m-sliderNav__item">
<button class="m-button --next" id="js-sliderNextButton">次へ</button>
</li>
</ul>
</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不具合で自動再生が機能しない可能性があります。その場合、ブラウザを何度かリロードお願いいたします。
コンテンツの自動再生
3秒ごとに自動でコンテンツが切り替わる自動再生機能を作成していきます。
「自動でコンテンツが切り替わること」以外は、
「次へ」ボタンをクリックしたときの挙動と同じです！
自動再生の作成
setInterval()を使って自動再生機能を作成していきます！
//スライドの自動再生処理
var slideTimer = setInterval(function() {
index ++;
sliding();
},3000);マウスの動きに合わせて、自動再生を停止・再開させる
- コンテンツの上にマウスが乗ったとき、自動再生を停止
- コンテンツの上からマウスが離れたとき、自動再生を再開
上記の処理を行なっていきます。
hover() を使って、マウスの動きに合わせた処理を行います。
hover() は、mouseenter() とmouseleave()の機能を一つにまとめたメソッドです。
//マウスの動きに合わせた処理
$(".js-sliderItem").hover(function () {
//マウスが乗っている時
//自動再生の停止
clearInterval(slideTimer);
}, function () {
//マウスが離れた時
//自動再生を再開
slideTimer = setInterval(function () {
index++;
sliding();
}, 3000);
});ボタンをクリックしたとき、時間のカウントをリセットする
「次へ」・「前へ」ボタンを押したときに、時間のカウントをリセットします。
ボタンを押したときに、カウントが2秒経っている場合、
画像が表示されたすぐ後に次の画像に移動してしまうからです。
その動画がこちらです↓
上記の対策として、「前へ」・「次へ」ボタンの両方に
時間のカウントをリセットする処理を追加します。
//「前へ」ボタンをクリックした時の処理
$("#js-sliderPrevButton").click(function () {
//カウント停止
clearInterval(slideTimer);
index--;
sliding();
//自動再生再開
slideTimer = setInterval(function () {
index++;
sliding();
}, 3000);
});
//「次へ」ボタンをクリックした時の処理
$("#js-sliderNextButton").click(function () {
//カウント停止
clearInterval(slideTimer);
index++;
sliding();
//自動再生再開
slideTimer = setInterval(function () {
index++;
sliding();
}, 3000);
});メンテナンス性の向上
前回、作成したスライダーの仕様では、
コンテンツの数が変わると、コードを変更する必要があり、メンテナンス性が悪いです。
そのため、コードを変更しなくても良いようにしていきます。
また、スライダーの切り替え時間などを変数にまとめたり、
自動再生の有無を設定できるようなオプション機能を作成します。
コンテンツの幅を自動設定
コンテンツの数に合わせて、自動で幅を設定できるようにしていきます。
まず、コンテンツの幅を取得します。
幅を取得するには、width() を使用します。
//コンテンツの幅を取得
var slideWidth = $(".js-sliderItem").width();続いて、コンテンツの合計幅を計算します。
//コンテンツの合計幅を変数で管理
var slideTotalWidth = slideCount * slideWidth;そして、js-sliderに計算した幅を指定します。
//js-sliderにコンテンツの合計幅を設定
$("#js-slider").width(slideTotalWidth);また、 leffの値をslideWidthに変更することで、
メンテナンス性があがります。
//「-1000」をslideWidthに変更
$("#js-slider").stop().animate({
left: -slideWidth * index
}, 300);この時点で、幅を自動で設定することができました。
もともとm-sliderにCSSでwidthを書いていましたが、
JavaScriptで幅を設定したので削除できます。
オプション機能をつける
スライダーを使い回しやすいように、
スライドの切り替え時間や自動再生の待機時間を変数にまとめます。
また、自動再生機能を使用するかの判断ができるように変数でまとめて、
自動再生機能に条件分岐を追加します。
//オプション
//スライドの切り替え時間
var slideSpeed = 300;
//自動再生の待機時間
var slideDelay = 3000;
//自動再生の有無
var slideAutoPlay = true;
//slideAutoPlayがtrueの場合
if(slideAutoPlay) {
var slideTimer = setInterval(function() {
index ++;
sliding();
},slideDelay);
}自動再生機能を関数にまとめる
自動再生機能の処理が重複しているので、関数にまとめたいと思います。
注意点としては、タイマー識別用の変数をグローバルスコープにしておくことです。
関数の中で変数を宣言してしまうと、変数を参照できる有効範囲は関数の中だけなので
タイマーを止めることができないからです。
詳しくはこちら→関数とスコープ
//タイマー識別用変数を宣言
var slideTimer;
//自動再生の独自関数
function slideSetTimer() {
if(slideAutoPlay) {
var slideTimer = setInterval(function() {
index ++;
sliding();
},slideDelay);
}
}
//自動再生の関数呼び出し
slideSetTimer();
//マウスの動きに合わせた処理
$(".js-sliderItem").hover(
function () {
//マウスが乗っている時
//自動再生の停止
clearInterval(slideTimer);
},
function () {
//マウスが離れた時
//自動再生の再開
slideSetTimer();
}
);
//「前へ」ボタンをクリックした時の処理
$("#js-sliderPrevButton").click(function () {
//カウント停止
clearInterval(slideTimer);
//現在のコンテンツ番号から1を引く
index--;
sliding();
//自動再生再開
slideSetTimer();
});
//「次へ」ボタンをクリックした時の処理
$("#js-sliderNextButton").click(function () {
//カウント停止
clearInterval(slideTimer);
//現在のコンテン番号に1を足す
index++;
sliding();
//自動再生再開
slideSetTimer();
});まとめ
前回、作成したスライダーよりメンテナンス性が向上しており、扱いやすくなったと思います。
これからは、スライダーにいろんな機能をつけてみて自身のレベルアップに努めます！
また、前回の記事は細かく分けすぎて読みづらかったので、
今回の記事では、コンパクトにまとめてみました。
まだまだ、ライティング力は未熟ですが徐々に改善できたらと思います。
最後まで読んでいただきありがとうございました！
前回の記事はこちら↓
