Vue3 使用 swiper插件

1.安装插件

npm i swiper 

2.引入配置

//swiper
import "swiper/css"
import "swiper/css/pagination"
import 'swiper/css/navigation'
import { Swiper, SwiperSlide } from "swiper/vue"
import { Autoplay, Navigation,Scrollbar,Pagination as Paginations } from "swiper"

3.配置代码

//配置swiper
const modules = [Paginations,Navigation,Scrollbar,Autoplay]
//自动轮播配置
const swiperCur = ref(null)
const onSwiper = (swiper) => {
  console.log(swiper)
  swiperCur.value = swiper//获取到当前的swiper
}
const autoConfig = reactive({
  info: {
    delay: 1000, //间隔时间
    disableOnInteraction: false, //设置为false，用户交互（滑动）后自动播放不会被禁用，每次交互后都会重新启动
    reverseDirection: false, //是否反方向轮播
    stopOnLastSlide: false, //执行到最后
    pauseOnMouseEnter: true, //鼠标输入时暂停
  },
})

4.完整代码

<swiper
          ref="swiper11"
          class="swiper"
          :observer="true"
          :observe-parents="true"
          :loop="true"
          :autoplay="autoConfig.info"
          :speed="1000"
          :looped-slides="6"
          :slides-per-group="2"
          :slides-per-view="2"
          :modules="modules"
          navigation
          :pagination="{ clickable: true }"
          :scrollbar="{ draggable: true }"
          :slide-to-clicked-slide="true"
          @swiper="onSwiper"
        >
          <swiper-slide
            v-for="item in state.cardData"
            :key="item"
            :class="['mb-[22px]', getStyles.columnCount === 4 ? 'w-[25%]' : '']">
{{这里放你的list}}
          </swiper-slide>
        </swiper>

import 'swiper/css'
import 'swiper/css/pagination'
import 'swiper/css/navigation'
import { Swiper, SwiperSlide } from 'swiper/vue'
import { Autoplay, Navigation, Scrollbar, Pagination as Paginations } from 'swiper'
//配置swiper
const modules = [Paginations, Navigation, Scrollbar, Autoplay]
//自动轮播配置
const swiperCur = ref(null)
const onSwiper = (swiper) => {
  console.log(swiper)
  swiperCur.value = swiper //获取到当前的swiper
}
const autoConfig = reactive({
  info: {
    delay: 1000, //间隔时间
    disableOnInteraction: false, //设置为false，用户交互（滑动）后自动播放不会被禁用，每次交互后都会重新启动
    reverseDirection: false, //是否反方向轮播
    stopOnLastSlide: false, //执行到最后
    pauseOnMouseEnter: true, //鼠标输入时暂停
  },
})