vue swiper 轮播实现

Vue 中使用 Swiper 实现轮播

Swiper 是一个流行的开源轮播库，支持移动端和桌面端的滑动效果。在 Vue 项目中，可以通过 swiper/vue 包快速集成。

安装 Swiper 依赖

确保项目中已安装 Swiper 的核心库和 Vue 专用模块：

npm install swiper @swiper/vue

基础轮播实现

在 Vue 组件中导入 Swiper 相关模块并配置：

<template>
  <swiper
    :slides-per-view="3"
    :space-between="50"
    @swiper="onSwiper"
    @slideChange="onSlideChange"
  >
    <swiper-slide v-for="slide in slides" :key="slide">
      {{ slide }}
    </swiper-slide>
  </swiper>
</template>

<script>
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';

export default {
  components: { Swiper, SwiperSlide },
  data() {
    return {
      slides: ['Slide 1', 'Slide 2', 'Slide 3', 'Slide 4'],
      swiperInstance: null
    };
  },
  methods: {
    onSwiper(swiper) {
      this.swiperInstance = swiper;
    },
    onSlideChange() {
      console.log('Slide changed');
    }
  }
};
</script>

添加导航按钮和分页器

通过 Swiper 模块扩展功能：

<template>
  <swiper
    :modules="modules"
    :pagination="{ clickable: true }"
    :navigation="true"
  >
    <swiper-slide v-for="slide in slides" :key="slide">
      {{ slide }}
    </swiper-slide>
  </swiper>
</template>

<script>
import { Pagination, Navigation } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';
import 'swiper/css/pagination';
import 'swiper/css/navigation';

export default {
  components: { Swiper, SwiperSlide },
  data() {
    return {
      modules: [Pagination, Navigation],
      slides: ['Slide 1', 'Slide 2', 'Slide 3']
    };
  }
};
</script>

自动播放与循环轮播

配置 autoplay 和 loop 参数：

<template>
  <swiper
    :modules="modules"
    :autoplay="{ delay: 2500 }"
    :loop="true"
  >
    <!-- 幻灯片内容 -->
  </swiper>
</template>

<script>
import { Autoplay } from 'swiper';
// 其他导入同上
export default {
  setup() {
    return {
      modules: [Autoplay]
    };
  }
};
</script>

响应式断点配置

根据不同屏幕尺寸调整显示数量：

const breakpoints = {
  320: { slidesPerView: 1 },
  768: { slidesPerView: 2 },
  1024: { slidesPerView: 3 }
};

注意事项

• 确保导入对应的 CSS 文件（如导航按钮需导入 swiper/css/navigation）。
• 若需使用 Thumbs（缩略图）等功能，需单独安装对应模块。
• Swiper 7+ 需使用 @swiper/vue，旧版 Vue 项目需注意版本兼容性。