スワイパープラグインを使用して Vue でカルーセルを実装する例

<!-- ページの msite_nav ナビゲーション セクションで swiper を使用します -->
<div class="スワイパーコンテナ">
	<div class="スワイパーラッパー">
        <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>

<スクリプト>
'swiper' から Swiper をインポートします
//同時に、swiperのcssファイルをインポートします import 'swiper/dist/css/swiper.min.css'
エクスポートデフォルト{
  //スワイパーはページがロード（マウント）された後に初期化する必要があることに注意してください。mounted（）{
    //カルーセルを実装するためのスワイパーインスタンスを作成する new Swiper('.swiper-container', {
      自動再生: 有効、
      // ページネーションが必要な場合: {
        el: '.swiper-pagination',
        クリック可能: true
      }
   })
  }
}
</スクリプト>

'swiper/swiper-bundle.min.css' をインポートします

//カテゴリを監視するための新しいウォッチを作成する
時計：
    カテゴリ (値) { // カテゴリ配列にデータがあります // ただし、インターフェースはまだ非同期に更新されていません}
}
// マウントされた新しいSwiper...コードを削除します

// setTimeout を使用すると効果は得られますが、タイミングは正確ではありません setTimeout(() => {
	// カルーセルを実装するためのSwiperインスタンスオブジェクトを作成します。new Swiper('.swiper-container', {
          自動再生: 有効、
          // ページネーションが必要な場合: {
            el: '.swiper-pagination',
            クリック可能: true
          }
	})
}, 100)

// データの変更後すぐに使用し、DOM が更新されるまで待機します。
this.$nextTick(() => {
	// インターフェースの更新が完了したら、すぐにコールバックを実行します。new Swiper('.swiper-container', {
    	自動再生: 有効、
    	ページネーション:
    	el: '.swiper-pagination',
    	クリック可能: true
    }
})