簡単スライダー第1弾 〜Bootstrap編〜


ProgateでJavaScript と jQuery の基礎を一通り学びましたので、JSで動くスライダーを設置してみることにしました!とりあえず、今私が作り方をなんとなく思い浮かべれる4つの作り方を試してみたいと思います。
その4つとは、「Bootstrapでカーセルスライダー」「jQueryのプラグインでカーセルスライダー」「jQueryの fadeOut と fadeIn でスライダー」 「jsでカーセルスライダー」です。
しかし、Bootstrapを使わずにカーセルスライダーを作ったことがないのでどんなコードで動かすのかまだイメージ出来ていません。なのでgoogle先生に頼りながら作成していこうと思っています。

※ お仕事ではJSを使う時、基本的には jQuery で実装するみたいです。また、スライダーなどは jQuery のプラグインを使用するみたいなので、今回は 生JS を書くのはやめようかなと思います。


スライダーシリーズ第1回目!
Bootstrapでカーセルスライダー

Bootstrapで作るのが一番簡単なのではないかと思っています。
今回は、CDN(コンテンツデリバリーネットワーク)でBootstrapを読み込んでいます。
※ CDNとは:https://blog.redbox.ne.jp/what-is-cdn.html

Bootstrapについての参考サイト

Bootstrapでのスライダー作成は、下記の5つをやればできてしまいます。一番時間がかかるところは、"1." だと思います。

  1. "Bootstrap カーセルスライダー" でググる
  2. jQuery読み込む
  3. Bootstrap読みこむ
  4. コード書く
  5. クラスつける

作成したスライダー

Bootstrapで作成したスライダーへのリンク:
https://rachicom.net/contents/js-slider/js-slider_bootstrap4_ver3.html

作成した時のソースコード

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>rachicom.net</title>

  <!-- ブートストラップCSS読み込み -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  
<!-- jQueryとブートストラップJS読み込み -->
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
    crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
    crossorigin="anonymous"></script>

  <!-- スタイル設定 -->
  <style>
    body {
      padding: 20px;
    }
    .slide_spring_list {
      margin: 0 auto;
      padding-left: 0px;
      max-width: 710px;
    }
  </style>
</head>

<body>

  <!-- スライダー -->
  <div id="slide_spring" class="carousel slide" data-ride="carousel">

    <!-- 画像下の黒い棒 -->
    <ol class="carousel-indicators">
      <li data-target="#slide_spring" data-slide-to="0" class="active"></li>
      <li data-target="#slide_spring" data-slide-to="1"></li>
      <li data-target="#slide_spring" data-slide-to="2"></li>
    </ol>

    <!-- スライド -->
    <ul class="slide-list carousel-inner slide_spring_list">
      <li class="slide-item carousel-item active">
        <img class="slide-img d-block w-100" alt="桜" src="slider_sakura.jpg">
        <div class="carousel-caption">
          <h5>1枚目</h5>
          <p>桜</p>
        </div>
      </li>
      <li class="slide-item carousel-item">
        <img class="slide-img d-block w-100" alt="土筆" src="slider_tsukushi.jpg">
        <div class="carousel-caption">
          <h5>2枚目</h5>
          <p>土筆</p>
        </div>
      </li>
      <li class="slide-item carousel-item">
        <img class="slide-img d-block w-100" alt="苺" src="slider_strawberry.jpg">
        <div class="carousel-caption">
          <h5>3枚目</h5>
          <p>苺</p>
        </div>
      </li>
    </ul>

    <!-- 画像横にある矢印ボタン -->
    <a class="carousel-control-prev" href="#slide_spring" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#slide_spring" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>

  <!-- スライダーの動きを設定 -->
  <script>
    $(function () {
      $('.carousel').carousel({
        interval: 3000,//スライドのスピード
        pause: "hover",//マウスオーバーでカルーセルが止まる
        wrap: true,//カルーセルを循環
        keybord: true//キーボードイベントに反応する
      });
    });
  </script>
</body>

</html>

投稿 2018/03/20