如何在vue3中使用swiper7

第一步：安装

在你项目目录，执行安装swiper命令

npm i swiper

第二步：html

modules 里面是模块的数组

<template>
  <swiper
    :modules="[Navigation, Pagination, Scrollbar, Autoplay]"
		     :slides-per-view="3"
		     :space-between="50"
			 navigation
			 autoplay
			 loop
    @swiper="onSwiper"
    @slideChange="onSlideChange"
  >
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
    ...
  </swiper></template>

第三步：js 配置

<script setup>

 // import Swiper core and required modules
  import { Navigation, Pagination, Scrollbar, A11y,Autoplay } from 'swiper';

  // Import Swiper Vue.js components
  import { Swiper, SwiperSlide } from 'swiper/vue';

  // Import Swiper styles
  import 'swiper/css';
  import 'swiper/css/navigation';
  import 'swiper/css/pagination';
  import 'swiper/css/autoplay';
  

 const onSwiper = (swiper) => {
        console.log(swiper);
      };
      const onSlideChange = () => {
        console.log('slide change');
      };

</script>