簡単スライダー第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についての参考サイト
- Bootstrap4公式ドキュメント
- Bootstrap非公式日本語版
- TetraThemes -Bootstrap3 カルーセルとCarousel.jsの簡単な使い方-
- 今さら使い始めたwebデザイナーによるBootstrap3の使い方 -スライドショー carousel-
Bootstrapでのスライダー作成は、下記の5つをやればできてしまいます。一番時間がかかるところは、"1." だと思います。
- "Bootstrap カーセルスライダー" でググる
- jQuery読み込む
- Bootstrap読みこむ
- コード書く
- クラスつける
作成したスライダー
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>