Swiper.jsを使用した矢印付きのページネーション

2024-02-09 23:27 Swiper.js JavaScript ページネーション
  1. Swiper.jsのセットアップ: まず、Swiper.jsをダウンロードしてプロジェクトに組み込みます。または、CDNリンクを使用することもできます。次に、必要なスタイルシートとスクリプトをHTMLファイルに追加します。
<!-- Swiperのスタイルシート -->
<link rel="stylesheet" href="path/to/swiper.min.css">
<!-- Swiperのスクリプト -->
<script src="path/to/swiper.min.js"></script>
  1. HTML構造の設定: SwiperコンテナとなるHTML要素を作成します。
<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">スライド1</div>
    <div class="swiper-slide">スライド2</div>
    <div class="swiper-slide">スライド3</div>
    <!-- 追加のスライドをここに追加 -->
  </div>
  <!-- 矢印付きのページネーション -->
  <div class="swiper-pagination"></div>
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
</div>
  1. JavaScriptでSwiperを初期化: SwiperをJavaScriptで初期化し、必要なオプションを設定します。
var swiper = new Swiper('.swiper-container', {
  // ここにオプションを追加
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

これで、Swiper.jsを使用して矢印付きのページネーションが実装されました。スライドショーをスワイプしたり、矢印をクリックしたりすると、ページが切り替わります。

この記事では、Swiper.jsを介して矢印付きのページネーションを実装する方法を紹介しました。Swiper.jsはカスタマイズ可能で柔軟なライブラリであり、さまざまなスライドショーコンテンツに適用することができます。