Chapter06 スライダー（前編）

概要と目標今まで学習した知識を使って、
コンテンツスライダーを作成しよう。

今まで学習した知識とJavaScriptを組み合わせれば、さらにいろんな機能を作ることができる。
今回は、コンテンツスライダーをできるだけ自力で作ってみましょう。

今回のゴール

RERUN

新しいウインドウで表示する

コンテンツスライダーとは画像などをスライドで表示させる

画像やコンテンツを左右に切り替える機能をコンテンツスライダーという。
この教材のページを切り替えてる機能も同じような仕組みで動いている。

モーダルウィンドウの表示例

RERUN

新しいウインドウで表示する

HTMLの作成スライダーに表示する
画像とコントローラーを配置。

まずは、HTMLを用意します。
スライダーに表示する画像と「次」と「前」に移動するボタンを配置する。
なお、HTMLの要素が変更しても動作するように、classを指定しておく。

HTMLを作成しよう

  1. 「chapter06」 › 「slider」フォルダ内の「index.html」をテキストエディタで開く
  2. 下記を参考に、各画像とコントローラーを記述
chapter06/slider/index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>コンテンツスライダー</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>コンテンツスライダー</h1>

  <div class="container">
    <div class="slider-wrap">
      <ul class="slider">
        <li class="slider-item">
          <img src="images/photo-sea.jpg" alt="きれいな海">
        </li>
        <li class="slider-item">
          <img src="images/photo-mountain.jpg" alt="きれいな山">
        </li>
        <li class="slider-item">
          <img src="images/photo-sky.jpg" alt="きれいな空">
        </li>
        <li class="slider-item">
          <img src="images/photo-river.jpg" alt="きれいな川">
        </li>
        <li class="slider-item">
          <img src="images/photo-town.jpg" alt="きれいな街">
        </li>
      </ul>
    </div>
    <!-- /.slider-wrap -->

    <ul>
      <li><button>前へ</button></li>
      <li><button>次へ</button></li>
    </ul>
  </div>
  <!-- /.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>
  1. 上書き保存
  2. 「chapter06」 ›「slider」フォルダ内の「index.html」をブラウザで開く
  3. 画像とコントローラーが表示されるかを確認
ブラウザでの表示例

RERUN

新しいウインドウで表示する

スタイルの設定スライドするコンテンツを横並びにする

floatを用いて、スライドするコンテンツを横並びにし、
1つのコンテンツだけが表示されるようにoverflow: hidden;を指定する。
後は、コンテンツの親要素をpositionで動かせば、スライダーの仕組みが出来上がる。

スライダーのスタイルイメージ
スライダーのスタイル

スタイルを設定しよう

  1. 「chapter06」 ›「slider」フォルダ内の「style.css」をテキストエディタで開く
  2. 下記を参考に、コンテンツを横並びにし、1コンテンツのみ表示するCSSを記述
chapter06/slider/style.css
.container {
  width: 800px;
  margin: 0 auto;
}

.slider-wrap {
  overflow: hidden;
}

.slider {
  width: 4000px; /* 800px × 5枚 */
  margin: 0;
  padding: 0;
  list-style: none;
}

.slider-item {
  float: left;
  width: 800px;
}
  1. 上書き保存
  2. 「chapter06」 ›「slider」フォルダ内の「index.html」をブラウザで開く
  3. 画像がひとつだけ表示されているかを確認
  4. 「chapter06」 ›「slider」フォルダ内の「style.css」をテキストエディタで開く
  5. 下記を参考に、コンテンツの親要素にpositionを指定し、
    leftを動かせば、スライドする仕組みを作る
chapter06/slider/style.css
.container {
  width: 800px;
  margin: 0 auto;
}

.slider-wrap {
  overflow: hidden;
}

.slider {
  position: relative;
  left: 0;
  width: 4000px; /* 800px × 5枚 */
  margin: 0;
  padding: 0;
  list-style: none;
}

.slider-item {
  float: left;
  width: 800px;
}
  1. 上書き保存
  2. 「chapter06」 ›「slider」フォルダ内の「index.html」をブラウザで開く
  3. leftの値を「-800px（画像の幅分）」などに変更して、ちゃんと動くかを確認
    （最終的に「0」に戻しておく）
ブラウザでの表示例

RERUN

新しいウインドウで表示する

クリックイベントの作成「前へ」、「次へ」の処理。

現在表示しているコンテンツが何番目のコンテンツかを変数で管理し、
「次へ」をクリックした時、そのコンテンツの番号に、
コンテンツの幅を掛けた分「left」を移動する。「前へ」も同様の仕組みで移動させる。

クリックイベントの作成

  1. 「chapter06」 ›「slider」フォルダ内の「index.html」をテキストエディタで開く
  2. スライドコンテンツの親要素と「次へ」、「前へ」のボタンにclass属性を指定する
chapter06/slider/index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>コンテンツスライダー</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>コンテンツスライダー</h1>

  <div class="container">
    <div class="slider-wrap">
      <ul class="js-slider slider">
        <li class="slider-item">
          <img src="images/photo-sea.jpg" alt="きれいな海">
        </li>
        <li class="slider-item">
          <img src="images/photo-mountain.jpg" alt="きれいな山">
        </li>
        <li class="slider-item">
          <img src="images/photo-sky.jpg" alt="きれいな空">
        </li>
        <li class="slider-item">
          <img src="images/photo-river.jpg" alt="きれいな川">
        </li>
        <li class="slider-item">
          <img src="images/photo-town.jpg" alt="きれいな街">
        </li>
      </ul>
    </div>
    <!-- /.slider-wrap -->

    <ul>
      <li><button class="js-sliderPrevButton">前へ</button></li>
      <li><button class="js-sliderNextButton">次へ</button></li>
    </ul>
  </div>
  <!-- /.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>
  1. 上書き保存
  2. 「chapter06」 ›「slider」フォルダ内の「app.js」をテキストエディタで開く
  3. ボタンクリック時の処理を記述する
chapter06/slider/app.js
$(function () {
  // 現在のコンテンツ番号を変数で管理
  var index = 0;

  // 「前へ」ボタンが押されたとき
  $('.js-sliderPrevButton').click(function () {
    // 現在のコンテンツ番号に1を引く
    index--;

    // leftの値をアニメーションで変更
    $('.js-slider').animate({
      left: index * -800
    }, 300);
  });

  // 「次へ」ボタンが押されたとき
  $('.js-sliderNextButton').click(function () {
    // 現在のコンテンツ番号に1を足す
    index++;

    // leftの値をアニメーションで変更
    $('.js-slider').animate({
      left: index * -800
    }, 300);
  });
});

答えを見る

  1. 上書き保存
  2. 「chapter06」 ›「slider」フォルダ内の「index.html」をブラウザで開く
  3. 画像をクリックした時に、コンテンツが移動するかを確認
  4. ただし、コンテンツがない場所にもスライドしてしまう
ブラウザでの表示例

RERUN

新しいウインドウで表示する

コンテンツがないとこに行かない処理コンテンツが存在しなければ、
先頭や末端に移動させる。

今のままでは、コンテンツが存在しない場所にもスライドしてしまう。
もしも、先頭のコンテンツで「前へ」を押されれば末端に、
もしも、末端のコンテンツで「次へ」を押されれば先頭に移動するように対策する。

コンテンツがないとこには行かないようにしよう

  1. 「chapter06」 ›「slider」フォルダ内の「index.html」をテキストエディタで開く
  2. スライドコンテンツにclass属性を指定する
chapter06/slider/index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>コンテンツスライダー</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>コンテンツスライダー</h1>

  <div class="container">
    <div class="slider-wrap">
      <ul class="js-slider slider">
        <li class="js-sliderItem slider-item">
          <img src="images/photo-sea.jpg" alt="きれいな海">
        </li>
        <li class="js-sliderItem slider-item">
          <img src="images/photo-mountain.jpg" alt="きれいな山">
        </li>
        <li class="js-sliderItem slider-item">
          <img src="images/photo-sky.jpg" alt="きれいな空">
        </li>
        <li class="js-sliderItem slider-item">
          <img src="images/photo-river.jpg" alt="きれいな川">
        </li>
        <li class="js-sliderItem slider-item">
          <img src="images/photo-town.jpg" alt="きれいな街">
        </li>
      </ul>
    </div>
    <!-- /.slider-wrap -->

    <ul>
      <li><button class="js-sliderPrevButton">前へ</button></li>
      <li><button class="js-sliderNextButton">次へ</button></li>
    </ul>
  </div>
  <!-- /.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>
  1. 「chapter06」 ›「slider」フォルダ内の「app.js」をテキストエディタで開く
  2. もしも、先頭のコンテンツで「前へ」を押されれば末端に、
    末端のコンテンツで「次へ」を押されれば先頭に移動するようする
chapter06/slider/app.js
$(function () {
  // スライドコンテンツの数を取得
  var count = $('.js-sliderItem').length;

  // 現在のコンテンツ番号を変数で管理
  var index = 0;

  // 「前へ」ボタンが押されたとき
  $('.js-sliderPrevButton').click(function () {
    // 現在のコンテンツ番号に1を引く
    index--;

    // 現在のコンテンツが 「0」より小さいかチェック
    if (index < 0) {
      // 「0」より小さい時
      index = count - 1;
    }

    // leftの値をアニメーションで変更
    $('.js-slider').animate({
      left: index * -800
    }, 300);
  });

  // 「次へ」ボタンが押されたとき
  $('.js-sliderNextButton').click(function () {
    // 現在のコンテンツ番号に1を足す
    index++;

    // 現在のコンテンツが コンテンツの数以上かを確認
    if (index > count - 1) {
      // コンテンツの数より大きい
      index = 0;
    }

    // leftの値をアニメーションで変更
    $('.js-slider').animate({
      left: index * -800
    }, 300);
  });
});

答えを見る

  1. 上書き保存
  2. 「chapter06」 ›「slider」フォルダ内の「index.html」をブラウザで開く
  3. コンテンツが存在しないところにスライドしなくなったかを確認
ブラウザでの表示例

RERUN

新しいウインドウで表示する

スライド処理の関数化重複する処理は関数にすると便利。

「前へ」や「次へ」を押した時の処理は、どちらもよく似ている。
目的のコンテンツまでスライドする処理を関数に登録することで、コードを効率化できる。

スライド処理の関数化

  1. 「chapter06」 ›「slider」フォルダ内の「app.js」をテキストエディタで開く
  2. スライドする処理を関数化する処理を記述
chapter06/slider/app.js
$(function () {
  // スライドコンテンツの数を取得
  var count = $('.js-sliderItem').length;

  // 現在のコンテンツ番号を変数で管理
  var index = 0;

  // 目的のコンテンツまでスライドする関数
  function sliding() {
    // 現在のコンテンツが 「0」より小さいかチェック
    if (index < 0) {
      // 「0」より小さい時
      index = count - 1;
    }

    // 現在のコンテンツが コンテンツの数以上かを確認
    if (index > count - 1) {
      // コンテンツの数より大きい
      index = 0;
    }

    // leftの値をアニメーションで変更
    $('.js-slider').animate({
      left: index * -800
    }, 300);
  }

  // 「前へ」ボタンが押されたとき
  $('.js-sliderPrevButton').click(function () {
    // 現在のコンテンツ番号に1を引く
    index--;
    sliding();
  });

  // 「次へ」ボタンが押されたとき
  $('.js-sliderNextButton').click(function () {
    // 現在のコンテンツ番号に1を足す
    index++;
    sliding();
  });
});

答えを見る

  1. 上書き保存
  2. 「chapter06」 ›「slider」フォルダ内の「index.html」をブラウザで開く
  3. スライドが問題なく機能するかを確認
ブラウザでの表示例

RERUN

新しいウインドウで表示する