vue3 swiper

npm install swiper vue-awesome-swiper

main.ts

//轮播
import VueAwesomeSwiper from "vue-awesome-swiper";
import "swiper/swiper-bundle.css"; // 此处看下载的swiper版本是多少 引入对应的css文件 具体看下方5.注意
// createApp(App)
//   .use(VueAwesomeSwiper)

一下是页面使用 

 <swiper :modules="modules" :loop="true" :slides-per-view="1" :space-between="50"
      :autoplay="{ delay: 4000, disableOnInteraction: false }" :navigation="navigation" :pagination="{ clickable: true }"
      :scrollbar="{ draggable: false }" class="swiperBox" @slideChange="onSlideChange">
      <swiper-slide>Slide 1</swiper-slide>
      <swiper-slide>Slide 2</swiper-slide>
      <swiper-slide>Slide 3</swiper-slide>
      <div class="swiper-button-prev" @click.stop="prevEl(item, index)" />
      <!--左箭头。如果放置在swiper外面，需要自定义样式。-->
      <div class="swiper-button-next" @click.stop="nextEl" />
      <!--右箭头。如果放置在swiper外面，需要自定义样式。-->
      <!-- 如果需要滚动条 -->
      <!-- <div class="swiper-scrollbar"></div> -->
    </swiper>

js 

import { Autoplay, Pagination, Navigation, Scrollbar } from 'swiper'
const navigation = ref({
  nextEl: ".swiper-button-next",
  prevEl: ".swiper-button-prev",
});
// 在modules加入要使用的模块
const modules = [Autoplay, Pagination, Navigation, Scrollbar]
const prevEl = (item, index) => {
  // console.log('上一张' + index + item)
};
const nextEl = () => {
  // console.log('下一张')
};
// 更改当前活动swiper
const onSlideChange = (swiper) => {
  // swiper是当前轮播的对象，里面可以获取到当前swiper的所有信息，当前索引是activeIndex
  console.log(swiper.activeIndex)
}