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

努力挣钱的小鑫

已于 2023-12-18 13:51:42 修改

阅读量1k

点赞数 2

分类专栏： Nuxt 文章标签： nuxt swiper

于 2023-11-06 10:46:20 首次发布

本文链接：https://blog.csdn.net/IAIPython/article/details/134241261

版权

Nuxt 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

一、需求示例

如图，滑动+自动滑动+点击滑动
在这里插入图片描述

二、建议先看官网

nuxt-swiper
在这里插入图片描述

三、使用

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

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>