swiper.js Ver.5.4.5で簡単にスライダー設置(ナビ・ページネーション調整済)

swiper.jsでかんたんに画像のスライダーが設置できる。オプションも豊富だし、便利よね〜。
汎用的に使えるバージョンでオプションを追加したコードをメモメモ。

スライドショーのサンプルはこちら→swiperスライダー

HTML

<head>内に読み込むcssを記載

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/css/swiper.css">
<link rel="stylesheet" href="assets/css/swiper.css">

ダウンロードしてきても良いんだけど、サイトを軽くするため、swiper.cssをCDNで読み込む。
「assets/css/swiper.css」の名前は何でもOK。自分のオリジナル調整用。

</body>前に読み込むjavascriptを記載

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/js/swiper.min.js"></script>
<script src="assets/js/swiper.js"></script>

CSS同様、ダウンロードしてきても良いんだけど、サイトを軽くするためCDNで読み込む。
「assets/js/swiper.js」の名前は何でもOK。swiperのオプションを記載して自分好みに表示を調整。

スライド部分

<div class="slide">

<!-- swiperのコンテナー -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="assets/images/img1.jpg" alt=""></div>
<div class="swiper-slide"><img src="assets/images/img2.jpg" alt=""></div>
<div class="swiper-slide"><img src="assets/images/img3.jpg" alt=""></div>
<div class="swiper-slide"><img src="assets/images/img2.jpg" alt=""></div>
</div>

<!-- ページネーション -->
<div class="swiper-pagination swiper-pagination-white"></div>

<!-- ナビゲーションボタン -->
<div class="swiper-button-prev swiper-button-white"></div>
<div class="swiper-button-next swiper-button-white"></div>

</div>
<!-- /swiper-container -->

</div>
<!-- /slide -->

「<div class=”slide”>」は、自分でページ調整するためにオリジナルで付けているだけなので、なくても大丈夫。
swiper部分は「<div class=”swiper-container”>」内です。

JavaScript(swiper.jsにオプションを記述して調整)

let mySwiper = new Swiper ('.swiper-container', { // ←swiper使う時、これは絶対必要。

  //この中にオプションを記述して調整

  // 動きの設定
  loop: true, //最後に達したら先頭に戻る
  autoplay: {
   delay: 5000, //スライド切り替わるまでの時間(秒)
  },
  speed: 1000, //スライドのスピード(秒)
  spaceBetween: 10, //画像間の余白。10px

  // パーツの設定
  //ページネーション(◯のところ)表示の設定
  pagination: {
    el: '.swiper-pagination', //ページネーションの要素
    type: 'bullets', //ページネーションの種類
    clickable: true, //クリックに反応させる
  },
  //ナビゲーションボタン(矢印)表示の設定
  navigation: {
    nextEl: '.swiper-button-next', //次へボタン
    prevEl: '.swiper-button-prev', //前へボタン
  },

  // 画像表示の設定
  autoHeight: true,
  centeredSlides: true, //アクティブ画像を中心に(デフォルトは左端)
  breakpoints: { //画面サイズの表示設定
    // 768px以上の場合
    768: {
      slidesPerView: 1.5, //小数点で前後画像が少し表示される
    },
    // 980px以上の場合
    980: {
      slidesPerView: 2, //前後ろ画像が半分表示される
    },
  }

});

スマホのときは1枚表示で表示、PCのときは前後の画像が見える仕様に調整。

CSS

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

cssは.swiper-containerで画面の横幅いっぱい、imgで画像が小さいときに大きく表示させるため記述している。

参考サイト・まとめ

サンプル付き!簡単にスライドを作れるライブラリSwiper.js超解説(基礎編)

スライダープラグイン Swiper(v5)の使い方

上記サイトを参考にさせてもらいました。ありがとうございます。
とても丁寧に解説されていて、いろんなパターンやオプションを確認することができます。

今当たり前にサイトのトップページにあるスライダーって、必要なんだろうか・・・。みんな見てる??
Appleサイトもスライドなしになったし、この先なくなっていくのかなぁ〜。とか思ったり。
まだまだ無くなることはなさそうな気もするので、ライブラリを使ってかんたんにステキなスライダーを表示していきたいです。

ABOUT US

yukipan
Web制作会社で働いてます。パンダとかリラックマとか、まあるいものが好き。好奇心旺盛で、何にでも興味をもってしまう。とりあえずやってみてから取捨選択するのがモットー。今はグリーンカレーとチャイと株式投資がブーム。