Vue3でSwiperを使って、Paginationをクリックした際に対応するスライドを表示させる

Vue3でSwiperを使って、Paginationをクリックした際に対応するスライドを表示させるには、Swiper.jsのAPIを使用する必要があります。以下はその実現方法の手順とコード例です。

手順

1. Swiper.jsのインストール
   必要なパッケージをインストールします。

   npm install swiper

1. Swiperのコンポーネントをセットアップ
   SwiperとSwiperSlideをインポートして設定します。

2. Swiperのonプロパティを利用する
   Swiperインスタンスを取得して、Paginationクリック時の挙動を設定します。

3. クリック時に対応するスライドに移動する
   SwiperインスタンスのslideToメソッドを使用します。

実装例

以下は、Paginationをクリックすると対応するスライドを表示するVue3コンポーネントの例です。

<template><div><swiper
      ref="swiperRef"      :modules="[Pagination]"      :pagination="{ clickable: true }"onSwiper="onSwiper"><swiper-slide v-for="(slide, index) in slides" :key="index">
        {{ slide }}
      </swiper-slide></swiper></div></template><script>import { ref } from"vue";import { Swiper, SwiperSlide } from"swiper/vue";import"swiper/swiper-bundle.min.css";import { Pagination } from"swiper";exportdefault {components:{ Swiper, SwiperSlide },setup(){const swiperRef =ref(null);const slides =["Slide 1","Slide 2","Slide 3","Slide 4"];const onSwiper =(swiper)=>{// Swiperインスタンスが初期化されたときの処理
      swiper.on("paginationClick",(swiperInstance, event)=>{// Paginationのクリックイベント処理const clickedIndex = swiperInstance.clickedIndex;if(clickedIndex !== undefined){
          swiper.slideTo(clickedIndex);}});};return{ swiperRef, slides, onSwiper };},};</script><style>/* スタイル調整 */</style>

ポイント

1. Paginationの設定
   paginationに{ clickable: true }を設定することで、クリック可能な状態にします。

2. onSwiperでのイベント登録
   Swiperが初期化された際にインスタンスを取得し、paginationClickイベントを監視してスライドを移動させます。

3. slideToメソッドの使用
   クリックされたPaginationのインデックスを取得してスライドを切り替えます。

このコードを基に、さらにカスタマイズしてUIやUXを向上させてみてください！