Swiper.jsを使用した矢印の追加方法

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

または、npmやyarnを使用してSwiper.jsをインストールします:

npm install swiper

yarn add swiper

Swiper.jsをHTMLに追加したら、スライダーを作成しましょう。以下は基本的な例です:

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
  </div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

上記の例では、"swiper-container"クラスを持つ要素がスライダーコンテナとなります。その下に"swiper-wrapper"クラスを持つ要素がスライドのコンテナとして配置されます。各スライドは"swiper-slide"クラスを持つ要素として定義されます。

矢印ナビゲーションを実装するために、"swiper-button-prev"および"swiper-button-next"というクラスを持つ要素を追加しました。これらの要素はスライダーの前後に矢印を表示します。

最後に、Swiper.jsの初期化を行います。以下のJavaScriptコードを追加してください:

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

上記のコードでは、"swiper-container"クラスの要素を指定し、"swiper-button-next"と"swiper-button-prev"を矢印ナビゲーションの要素として指定しています。

これでSwiper.jsを使用して矢印ナビゲーションを実装する準備が整いました。必要に応じてCSSスタイルを追加して、矢印の見た目をカスタマイズすることもできます。

以上が、Swiper.jsを使用して矢印ナビゲーションを追加する方法です。これにより、ユーザーはスライドを簡単に操作できるようになります。