自力でスライダーを設置するのは簡単だが、スライダーの「当たり前」機能を付けるのがすごい手間だったりする。
「レスポンシブ対応」や「スワイプやマウスオーバーでの操作」、「スライドの数が増えた時のスクリプト、スタイルの修正」、「Next,Prevボタンの挙動」、「スライド数と現在のスライド位置を表示する●の設置」などなど、スライダーを作るだけでひとつのサイトを作るくらいの手間がかかる。
そんな手間と時間を一気に解消してくれるのがSwiper.js。
DEMO
すごい。
「当たり前」の機能を全てカバーできてるから、すごい。
Swiper.jsの利用方法は簡単。
まず、ここからSwiper.jsのパッケージをダウンロードして、ダウンロードした中の・・・うわぁ～なんかいっぱい入ってる。
その中の、「package」→「css」→「swiper.css」をデスクトップに、あともう一つダウンロードしたフォルダの先頭に戻って、「package」→「js」→「swper.js」をデスクトップに落としてその２つを利用してください。
次にHTMLのheadに、そのファイルのリンクを記述して準備できた。
<head> <link rel='stylesheet' type='text/css' href='swiper.css' /> <script src='swiper.js'></script> </head>
準備ができたらスライダーの中身のHTMLを記述。
<div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">スライダー１</div> <div class="swiper-slide">スライダー２</div> <div class="swiper-slide">スライダー３</div> </div> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> <div class="swiper-pagination"></div> </div>
さぁ最後に、スライダーの詳細設定を記述して出来上がりだ。
スライダーの詳細設定を書く場所は、HTMLの最後の方。「/body」のすぐ上に書こう。
スライダーの詳細設定は、スライダーのHTMLを読み込んだ後に書かないと機能しないからね！
<script>
var swiper = new Swiper('.swiper-container', {
loop: true,
autoplay: {
delay: 3000,
disableOnInteraction: true
},
pagination: {
el: '.swiper-pagination',
type: 'bullets',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
}
});
</script>
これで「当たり前」の機能を全てカバーしたスライダーが出来上がりました。
コメント