【Nuxt】Nuxt3 中使用 swiper 并自动滑动、手动滑动、点击滑动

demo 示例

建议先看官网

nuxt-swiper

.vue 文件中使用

样式请根据你项目实际来，只展示基础配置

import { Swiper, SwiperSlide } from 'swiper/vue'
import { Autoplay } from 'swiper/modules'
import 'swiper/css'
let useSwiper: any = null // swiper实例
// 初始化swiper
const onSwiper = (swiper: any) => {
  useSwiper = swiper
}
// 分页
const changePage = (num: number) => {
  if (num > 0) {
    // 下一页
    useSwiper.slideNext()
  } else if (num < 0) {
    // 上一页
    useSwiper.slidePrev()
  }
}

          <Swiper
            @swiper="onSwiper"
            :autoplay="{ delay: 3000, disableOnInteraction: false }"
            :modules="[Autoplay]"
            :slides-per-group="4"
            :slides-per-view="4"
            :space-between="30"
          >
            <SwiperSlide v-for="(item, index) in data" :key="index" :virtualIndex="index">
              <div class="schema-card">
                <div class="card-img">div>
                <div class="card-tile">{{ item.title }}div>
                <div class="card-text">{{ item.text }}div>
              div>
            SwiperSlide>
          Swiper>