超簡単！ jQueryでスライダーを自作
Webページにスライダーを導入すればコンテンツが多くなった時や、
スマホ対応のページを作るときに、見た目をすっきりとさせることができます。
最近ではおしゃれなデザインのスライダーを簡単に導入できる
プラグインがたくさんありますが、今回は以下の手順で自作してみました。
読む対象
HTMLとCSSはできるがjQueryがうまく使えないという方。
Webページをシンプルに見せたいという方。
プラグインでスライダーを導入したことはあるが仕組みが分からないという方。
8つの手順で実装
手順①
スライドしたい要素に適切なclass名(例：slide)をつける。
手順②
表示するスライドに適切なclass名(例：active)をつける。
最初は1枚目のスライドを表示してほしいので一番最初につけました。
例
<div class="slide active">
<h2>スライド1枚目</h2>
<img src="画像のパス">
</div>
<div class="slide">
<h2>スライド2枚目</h2>
<img src="画像のパス">
</div>
<div class="slide">
<h2>スライド3枚目</h2>
<img src="画像のパス">
</div>
<div class="slide">
<h2>スライド4枚目</h2>
<img src="画像のパス">
</div>
手順③
cssファイルでslideクラスにdisplay: none;を適用する。
手順④
手順③の文以降にactiveクラスにdisplay: block;を適用する。
.slide {
display: none;
}
.active {/*.slide{...}よりも下に記述*/
display: block;
}
手順⑤
slideクラスの前後にnextボタンとprevボタンを作るための下準備として
Font Awesomeを利用できるようにheadタグ中に以下の1文を宣言します。
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
手順⑥
slideクラスの前後に以下のようにクラスを作る。
<div class="button prev">
<i class="fas fa-chevron-circle-left"></i>
</div>
/*ここに手順②のコードが入る*/
<div class="button next">
<i class="fas fa-chevron-circle-right"></i>
</div>
このiタグの中身はFont Awesomeからとってきたアイコンです。
今回はarrowで検索をしてprev、next用の矢印アイコンを持ってきました。
利用したいアイコンを選択すれば自動でコードが出てくるので、
挿入したい位置にコピペでOKです。
大きさを選べたり、cssで色や位置を変更できるので非常に便利です。
手順⑦
js形式のファイルに以下のコードを記述する。
$(document).ready(function(){
function toggleChangeBtn() {
var slideIndex = $('.slide').index($('.active'));/*activeクラスがついている要素(現在表示中のスライド)のindexを取得*/
$('.button').show();/*両ボタンを表示*/
if(slideIndex == 0){/*一番最初の要素が表示されているとき*/
$('.prev').hide();/*prevボタンを隠す。*/
}else if(slideIndex == $('.slide').length - 1){/*一番最後の要素が表示されているとき*/
$('.next').hide();/*nextボタンを隠す。*/
}
}
toggleChangeBtn();
$('.next').click(function() {/*nextボタンを押したとき*/
var $displaySlide = $('.active');/*現在表示中のスライドを取得*/
$displaySlide.removeClass('active');/*そのスライドからactiveクラスを除いて表示されないようにする。*/
$displaySlide.next().addClass('active');/*次のスライドにactiveクラスをつけ、表示させる。*/
toggleChangeBtn();/*nextボタンを隠すか判断*/
});
$('.prev').click(function() {/*prevボタンを押したとき*/
var $displaySlide = $('.active');/*現在表示中のスライドを取得*/
$displaySlide.removeClass('active');/*そのスライドからactiveクラスを除いて表示されないようにする。*/
$displaySlide.prev().addClass('active');/*前のスライドにactiveクラスをつけ、表示させる。*/
toggleChangeBtn();/*prevボタンを隠すか判断*/
});
});
手順⑧
HTMLファイルのheadタグ内でjQueryとsample.jsを読み込みます。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="sample.js"></script>
最後に
今回は超基本のスライダーを作成しました。
この内容が理解できていればスライドを一枚ずつではなく
二枚ずつ表示することもできたり、
スライダーの下に今、何枚目が表示されているのかのナビゲーション
をつけれたりできるようになります。