jQuery不要! スライダーを簡単に導入するSwiper.jsの使い方

Jqueryは不要で、多機能なスライダー用のjavascriptを試してみたので、
備忘録としてメモ。

  1. 導入の前準備
  2. スライダー部分のHTMLを用意
  3. 基本的なアレンジ
  4. その他のアレンジ1:複数のスライダー設置
  5. その他のアレンジ2:切り替えをフェードアウトにする

1 導入の前準備

CDN(外部から読み込み)で使う場合

<head>内に、cssを読み込む。

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">

</body>の直前に、jsを追加する。

<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
 

2 スライダー部分のHTMLを用意

Class名は変えても大丈夫だけど、読み込んだcssがそのまま使えるので、とりあえずそのままで使用します。
スライダー内 に文章などを入れたい場合は、.swiper-slide内にそれぞれ記載すればOK!


 <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="“〇〇”" alt=""></div>
        <div class="swiper-slide"><img src="“〇〇”" alt=""></div>
        <div class="swiper-slide"><img src="“〇〇”" alt=""></div>
      </div>
</div>
 

</body>直前の、swiper-bundle.min.jsを読み込んだ次の行に下記も追加します

 
<script>
 const swiper = new Swiper('.swiper-container', {
});
 </script>

スライダーの大きさを変えたいときは、下記のように、全体を囲むcontainerのサイズを変更します。

 
.swiper-container {
        width: 100%;
        height: 100%;
      }

3 基本的なアレンジ

ページネーションやナビゲーション(左右の矢印)を追加したい場合

htmlに下記のように追加します。

 
 <div class="swiper-container">
 <div class="swiper-wrapper">
   <!-- contents -->
 </div>
   <!-- pagination -->
  <div class="swiper-pagination"></div>

  <!-- navigation-->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

JSの方は下記を追加。

 
const swiper = new Swiper('.swiper-container', {
 	// pagination
 	pagination: {
 		el: '.swiper-pagination',
 		clickable: true,
 	},
  	// Navigation
 	navigation: {
 		nextEl: '.swiper-button-next',
 		prevEl: '.swiper-button-prev',
 	},

      });

ちなみに、矢印の色や形はcssでも変更可能だけれど、白くするだけなら、左右矢印のclass名にswiper-button-whiteを追加すればOK。

その他基本的なアレンジ

それぞれ1行付け足してあげることで、簡単にアレンジをすることが可能です!

 
const swiper = new Swiper('.swiper-container', {
 	// Optional parameters
 	loop: true, //ループさせる
 	slidesPerView: 3, //1回で何個の画像を表示させるか
 	spaceBetween: 30, /スライダー同士の間隔を設定
 	centeredSlides: true, //スライダーを中央に持ってくる

 });

4 その他のアレンジ1:複数のスライダー設置

2こ以上のスライダーを設置したいときは、HTMLのclass名にそれぞれのスライダー名を追加します。

 
  <div class="swiper-container slider1">
      <div class="swiper-wrapper">
     <!-- contents -->
      </div>
      <div class="swiper-pagination"></div>
    </div>

    <div class="swiper-container slider2">
      <div class="swiper-wrapper">
    <!-- contents -->
      </div>
      <div class="swiper-pagination"></div>
    </div>
 
  const swiper1 = new Swiper('.slider1', {
        spaceBetween: 30,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
      });
 const swiper2 = new Swiper('.slider2’, {
        spaceBetween: 30,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
      });

5その他のアレンジ2:切り替えをフェードアウトにする

こちらも、すでに設定が用意されているので、javascript内に数行追加します。

 
  const swiper = new Swiper('.swiper-container', {
effect: 'fade',
 autoplay: {
   delay: 5000,
 },
});
delay: 〇〇,自動再生の速度。単位がms ( 1秒=1000ms)
disableOnInteraction: false,falseで、スライドを操作中にも自動再生が止まらないようにすることが可能
stopOnLastSlide最後のスライダーになったら、自動再生が止まるようにできます。(loopの指定をしている場合は効果なし)

などなど。。

ほかにもいろいろ仕様が用意されているので、下記公式ページのdemoが参考になります。