JSライブラリで「スライダー」

スライダーのライブラリで代表的なものは「Swipper」と「slick」である。
今回は「Swipper」を使います。

「Swipper」の事前準備

1.Swipperのダウンロードページから、ZIPファイルをダウンロードする。
2.実装したいデータの(a)CSSフォルダに「swiper.css」を移動、(b)jsフォルダを作成しその中に「swiper.min.js」を移動させる。
3.実装したいデータのHMTLに読み込ませる。
 (a),head内の、style.cssの上に記述

<link rel = "stylesheet" href = "css/swiper.css">

　(b),footerの後ろ、bodyの前に記述

<script src = "js/swiper.min.js"></script>

準備完了！

基本のHTML

（クラス名変えないこと！）

<div class="swiper-container">
 <div class="swiper-wrapper">
   <div class="swiper-slide"><img src="img/items01.jpg" alt=""></div>スライド1枚目
   <div class="swiper-slide"><img src="img/items02.jpg" alt=""></div>スライド2枚目
   <div class="swiper-slide"><img src="img/items03.jpg" alt=""></div>スライド3枚目
 </div>
 <div class="swiper-button-prev"></div>戻るボタン
 <div class="swiper-button-next"></div>次へボタン
</div>

基本のJS

【<script>タグの中に記述すること！】

var swiper = new Swiper('.swiper-container', {
 navigation: {
   nextEl: '.swiper-button-next',
   prevEl: '.swiper-button-prev',
 }
});

「次へボタンを押すと次の画像へ、戻るボタンを押すと前の画像が表示される」という指示内容

swiperのオプション

よく使用するもの5つ
・スライダーをループ
・アローボタン（↑上記）
・スライダーの自動再生
・スライダーの表示速度を変更
・スライダーの数を把握して何番目か表示する

・スライダーをループ
　先ほどの記述のnavigation{},の外に、loop: true,を記述

・スライダーの自動再生
　navigation{},の後に、autoplay:{}を記述

autoplay: {
 delay: 3000,　　　　　　　　1枚3秒かけて次に変える
 disableOnInteraction: true　　　　　　　　　　　ユーザーが操作したら、自動再生をストップさせる
},

・スライダーの表示速度を変更
　navigation{},の外に、speed: 1000,を記述(1秒かけて変える)