簡単スライダー第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でのスライダー作成は、下記の５つをやればできてしまいます。一番時間がかかるところは、"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>
