超簡単！ jQueryでスライダーを自作

超簡単！ jQueryでスライダーを自作

Webページにスライダーを導入すればコンテンツが多くなった時や、
スマホ対応のページを作るときに、見た目をすっきりとさせることができます。
最近ではおしゃれなデザインのスライダーを簡単に導入できる
プラグインがたくさんありますが、今回は以下の手順で自作してみました。

読む対象

HTMLとCSSはできるがjQueryがうまく使えないという方。
Webページをシンプルに見せたいという方。
プラグインでスライダーを導入したことはあるが仕組みが分からないという方。

8つの手順で実装

手順①
スライドしたい要素に適切なclass名(例：slide)をつける。

手順②
表示するスライドに適切なclass名(例：active)をつける。
最初は1枚目のスライドを表示してほしいので一番最初につけました。
例

" data-sourcepos="24:1-55:3">

　　<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;を適用する。

```css:example.css
.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クラスの前後に以下のようにクラスを作る。

" data-sourcepos="66:1-110:3">

　　<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](https://fontawesome.com/start)からとってきたアイコンです。
今回はarrowで検索をしてprev、next用の矢印アイコンを持ってきました。
利用したいアイコンを選択すれば自動でコードが出てくるので、
挿入したい位置にコピペでOKです。
大きさを選べたり、cssで色や位置を変更できるので非常に便利です。

手順⑦
js形式のファイルに以下のコードを記述する。

```js:sample.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を読み込みます。

//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js">

<script src="sample.js"></script>```


最後に
---
今回は超基本のスライダーを作成しました。
この内容が理解できていればスライドを一枚ずつではなく
二枚ずつ表示することもできたり、
スライダーの下に今、何枚目が表示されているのかのナビゲーション
をつけれたりできるようになります。

参考
---
[Font Awesomeの使い方](https://saruwakakun.com/html-css/basic/font-awesome)