スライダー
2023年4月15日
みなさんこんにちは。
ケミストのWeb担当みやのです。
「Web」記事では、これまでに得たWebに関する知識を記録として残していきたいと思います。
今回は「スライダー」について書きます。
スライダーとは
スライダーとは、Webサイトにおけるスライドショーです。
カルーセル（carousel：回転木馬）とも呼ばれます。
トップページで、大きい画像が次々に変わっていくアレですね。
うちのトップページでも使っています。
ちなみに以下のようなスライドして数値を選べるやつ（input type="range"）
現在の値はです
もスライダーというみたいです。ややこしい。
スライダーのプラグイン
スライダーを実装するプラグインがいろいろあるようです。
それぞれのプラグインについては別の記事で書こうと思います。
うちのトップページではbxsliderを使っていますが、bxsliderは2018年以降更新されていないようです。Swiperに変えようかな...
Bootstrapでは
参考：Bootstrap4.2日本語リファレンス｜Carousel
Bootstrapにもスライダーを実装できる機能（carousel）があります。早速作ってみましょう。
まずは全体を<div>と</div>で囲って、carousel、slideという2つのクラスを付与します。
<div class="carousel slide">
</div>さらにIDを設定し（仮にsampleとします）data-ride="carousel"と記述します。
<div class="carousel slide" id="sample" data-ride="carousel">
</div>次は中身の作成です。今回は3ページで作ってみます。
さっきの<div>の中に、carousel-innnerを設置します。
<div class="carousel slide" id="sample" data-ride="carousel">
<div class="carousel-inner">
</div>
</div>さらにcrousel-innnerの中にcarousel-itemを3つ設置し、1つめにはさらにactiveというクラスを当てます。
<div class="carousel slide" id="sample" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active"></div>
<div class="carousel-item"></div>
<div class="carousel-item"></div>
</div>
</div>それぞれのcrousel-itemの中に画像を設置します。d-blockとw-100というクラスを当てておきます。
<div class="carousel slide" id="sample" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active"><img src="img/サイ.jpg" class="d-block w-100"></div>
<div class="carousel-item"><img src="img/ゴリラ.jpg" class="d-block w-100"></div>
<div class="carousel-item"><img src="img/ゾウ.jpg" class="d-block w-100"></div>
</div>
</div>本当はこの時点でスライダーとして動くはずなんですがなぜか動きません。何でやねん。
前後の矢印（コントローラー）を追加してみます。
crousel-innnerの外にaタグを2セット設置します。
それぞれにhref="#sample"、role="button"と記述します。
<div class="carousel slide" id="sample" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active"><img src="img/サイ.jpg" class="d-block w-100"></div>
<div class="carousel-item"><img src="img/ゴリラ.jpg" class="d-block w-100"></div>
<div class="carousel-item"><img src="img/ゾウ.jpg" class="d-block w-100"></div>
</div>
<a href="#sample" role="button"></a>
<a href="#sample" role="button"></a>
</div>さらに片方にclass="carousel-control-prev"、data-slide="prev"、
もう片方はclass="carousel-control-next"、data-slide="next"と記述します。
<div class="carousel slide" id="sample" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active"><img src="img/サイ.jpg" class="d-block w-100"></div>
<div class="carousel-item"><img src="img/ゴリラ.jpg" class="d-block w-100"></div>
<div class="carousel-item"><img src="img/ゾウ.jpg" class="d-block w-100"></div>
</div>
<a class="carousel-control-prev" href="#sample" role="button" data-slide="prev"></a>
<a class="carousel-control-next" href="#sample" role="button" data-slide="next"></a>
</div>それぞれの<a>と</a>の中に以下のように記述します。
<div class="carousel slide" id="sample" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active"><img src="img/サイ.jpg" class="d-block w-100"></div>
<div class="carousel-item"><img src="img/ゴリラ.jpg" class="d-block w-100"></div>
<div class="carousel-item"><img src="img/ゾウ.jpg" class="d-block w-100"></div>
</div>
<a class="carousel-control-prev" href="#sample" 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="#sample" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
やっと動いたぁ
一応スマホのスワイプにも対応しています。
せっかくなので、画面中央下の横棒（インジケーター）を追加してみましょう。
carousel-innnerの外（上？）に<ol>を設置し、その中に<li>を3つ追加します。
<div class="carousel slide" id="sample" data-ride="carousel">
<ol>
<li></li>
<li></li>
<li></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active"><img src="img/プテラ.jpg" class="d-block w-100"></div>
<div class="carousel-item"><img src="img/トリケラ.jpg" class="d-block w-100"></div>
<div class="carousel-item"><img src="img/ティラノ.jpg" class="d-block w-100"></div>
</div>
<a class="carousel-control-prev" href="#sample" 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="#sample" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>さらに以下のように記述します。
<div class="carousel slide" id="sample" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#sample" data-slide-to="0" class="active"></li>
<li data-target="#sample" data-slide-to="1"></li>
<li data-target="#sample" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active"><img src="img/プテラ.jpg" class="d-block w-100"></div>
<div class="carousel-item"><img src="img/トリケラ.jpg" class="d-block w-100"></div>
<div class="carousel-item"><img src="img/ティラノ.jpg" class="d-block w-100"></div>
</div>
<a class="carousel-control-prev" href="#sample" 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="#sample" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
まとめ
うちのサイトはBootstrap4.1だったのですが、スワイプに対応しているのは4.2以降らしいので、このページだけ4.2にしました。
スマホではちょっと使いづらいかな～
jQueryは1だとコントローラーが動かなかったので3にしました。スムーススクロールの挙動がちょっとおかしいけど気にしない
そのうち他のプラグインに挑戦してみようと思います！
