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>