スライドショー

手こずったJQueryのスライドショー。
作ったのはボタンを押したときに画像がスライドするものです。
説明が間違っていたら申し訳ないです。勉強します。

まず最初にコードを書くまえに必要な手順をリストアップしました。以下自分が必要だと思いメモに記述した内容です。

① forを関数外で実装し、要素の位置情報、個数、幅の個数を取得する
② ボタンが押されたとき、data属性を取得する
③ １クリックごとに要素の幅分スライドする

forを関数外で実装し、要素の位置情報、個数、幅を取得する

①では、画像の位置情報を配列に入れ流必要があると考えたため、forを使って、位置情報を取得できるようにしました。

まずスライドショーで見せたい画像ファイルを用意します。

<ul class="slider-list clearfix">
 <li><img src="./img/1.jpg"></li>
 <li><img src="./img/2.jpg"></li>
 <li><img src="./img/3.jpg"></li>
 <li><img src="./img/4.jpg"></li>
</ul>

空の配列を用意します。

var pages = [];

画像の位置情報を取得するために、要素の個数を取得する必要があるため、lengthを使います。

var numCount = $('.slider-list li').length;

要素の幅を取得した後に幅の数値を入れる変数を用意します。

var num = 0;

forで i を用意し、i が numCount より小さい数値の場合のみ繰り返されるようにします。
forの処理で画像のサイズを width を使って num に追加し、 pushを使って配列 pages に要素を格納します。『-』をつけた理由は、 element.style にて left としているため、右にスライドすると『- px』になったからです。
**eq()**とは、複数のHTML要素の中からインデックス番号を指定することで特定の要素だけを取得できます。

for(var i = 0; i < numCount; i++){
 if (i == 0) {
  pages.push(0);
 } else {
  num += - $('.slider-list li').eq(i).width();
  pages.push(num);
 }
}

これでforを関数外で実装し、要素の位置情報、個数、幅を取得することができました。

ボタンが押されたとき、data属性を取得する

②では、クラスごとに呼び出すのではなくdata属性を使うことでより汎用性の高いソースになるため、data属性を取得します。
ボタンを用意します。

<button type="button" class="slider-ctrl-btn is-prev" data-ctrl="prev"></button>
<button type="button" class="slider-ctrl-btn is-next" data-ctrl="next"></button>

slider-ctrl-btn の data('ctrl') を取得したいため、以下のようになります。

$(this).data('ctrl')

１クリックごとに要素の幅分スライドする

③ではifを使って prev と next の条件を作ります。
まず初期値の用意。

var pagesNum = 0;

ボタンは２つのため条件も２つで足りるので、が「もし②が『prev』のとき、右にスライドする。それ以外の場合、左にスライドする。」としました。animateを使うことでスライドするアニメーションが実行されます。

$(".slider-ctrl-btn").click(function () {
  if ($(this).data('ctrl') === 'next') {
    var step = 1;
    pagesNum = pagesNum + step;
    if (pagesNum === pages.length) {
      pagesNum = 0;
    }
    $(".slider-list").animate({left: pages[pagesNum]})
  } else if ($(this).data('ctrl') === 'prev') {
    var back = -1;
    pagesNum = pagesNum + back;
    if (pagesNum === -1) {
      pagesNum = pages.length - 1;
    }
    $(".slider-list").animate({left: pages[pagesNum]})
  }
});