jQueryプラグイン【Swiper】 を使ったカルーセルスライダー

スライダーを作成してくれるプラグイン【Swiper】

このプラグインはjQueryを必要としないので、プラグインを入れるだけで使用することが出来る。

できるだけ軽くするために、ファイルをダウンロードしてきてカスタマイズする方法をとろう。

ファイルのダウンロード

ダウンロードサイトから以下の2つのファイルをダウンロードする。

• swiper-bundle.min.js
• swiper.min.css

「swiper-bundle.min.css」 もあって、cssを書かなくてもスレイダーが動く。
ただ、オリジナルデザインで実装するのであれば、「swiper.min.css」が最低限のスタイルになっているのでカスタマイズしやすい。

プラグインを読み込む

[body] の閉じタグの前に以下の様に書く。

その下に様々なオプションを書く。

<script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
<script>
  const swiper = new Swiper('.swiper', {
    // Optional parameters
    loop: true,
    speed: 500,
    effect: "coverflow",
    // If we need pagination
    pagination: {
      el: '.swiper-pagination',
    },
    // Navigation arrows
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    // And if we need scrollbar
    scrollbar: {
      el: '.swiper-scrollbar',
    },
  });
</script>
</body>　

HTML のコード

[head]タグの中でcssを読み込む

  <!-- swiper.jsのセット読込 swiper.css -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css" />

[body]タグに書く。

<!-- Slider main container -->
<div class="swiper">　//任意の文字列に変更可能
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">    <!-- Slides -->
    <div class="swiper-slide">
      <img class="" src="./img/cake_choco.jpg" alt="">
    </div>
    <div class="swiper-slide">
      <img src="./img/cake_crepes.jpg" alt="">
    </div>
    <div class="swiper-slide">
      <img src="./img/cake_short.jpg" alt="">
    </div>
  </div>
  <!-- If we need pagination -->
  <div class="swiper-pagination"></div>

  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- If we need scrollbar -->
  <div class="swiper-scrollbar"></div>
</div>

CSS のコード

/* swiper の大きさを設定 */
.swiper {
  max-height: 80%;
  aspect-ratio: 16/9;
}