vue实现swiper

Vue 中实现 Swiper 的方法

安装 Swiper 依赖

通过 npm 或 yarn 安装 Swiper 和 Vue-Awesome-Swiper（专为 Vue 封装的库）：

npm install swiper vue-awesome-swiper --save
# 或
yarn add swiper vue-awesome-swiper

全局或局部引入 Swiper

全局引入（在 main.js 中）：

import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
Vue.use(VueAwesomeSwiper)

局部引入（在组件中）：

import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'

基础轮播实现

在 Vue 组件中使用 Swiper：

<template>
  <swiper :options="swiperOptions">
    <swiper-slide v-for="(item, index) in slides" :key="index">
      {{ item }}
    </swiper-slide>
    <!-- 分页器 -->
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
</template>

<script>
export default {
  data() {
    return {
      slides: ['Slide 1', 'Slide 2', 'Slide 3'],
      swiperOptions: {
        pagination: {
          el: '.swiper-pagination'
        },
        loop: true,
        autoplay: {
          delay: 3000
        }
      }
    }
  }
}
</script>

自定义样式与配置

通过修改 swiperOptions 实现不同效果：

swiperOptions: {
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev'
  },
  slidesPerView: 3,
  spaceBetween: 30,
  breakpoints: {
    768: {
      slidesPerView: 2
    },
    480: {
      slidesPerView: 1
    }
  }
}

需在模板中添加对应的 DOM 元素：

<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>

使用 Swiper 原生 API

通过 ref 获取 Swiper 实例调用原生方法：

<swiper ref="mySwiper" :options="swiperOptions">...</swiper>

methods: {
  goNext() {
    this.$refs.mySwiper.$swiper.slideNext()
  }
}

注意事项

1. 若样式未生效，检查 CSS 文件是否正确引入。
2. 动态数据需在数据更新后调用 update() 方法：

   this.$nextTick(() => {
     this.$refs.mySwiper.$swiper.update()
   })

3. 如需使用 Swiper 7+，需安装对应版本的 vue-awesome-swiper@next。