swiper实现vue轮播

安装 Swiper 依赖

在 Vue 项目中安装 Swiper 核心库和 Vue 组件：

npm install swiper vue-awesome-swiper

引入 Swiper 组件

在需要使用的 Vue 文件中引入 Swiper 和 SwiperSlide：

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

基础轮播实现

模板部分添加 Swiper 容器和幻灯片：

<template>
  <swiper>
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
  </swiper>
</template>

添加导航控件

引入导航模块并配置：

import { Navigation } from 'swiper/modules';
// 在 setup 中
const modules = [Navigation];

模板中添加导航元素：

<swiper :modules="modules" navigation>
  <!-- slides -->
  <template #container-end>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </template>
</swiper>

自动轮播配置

通过参数控制自动播放：

const autoplayOptions = {
  delay: 2500,
  disableOnInteraction: false
};

模板中使用：

<swiper :autoplay="autoplayOptions">
  <!-- slides -->
</swiper>

响应式断点设置

配置不同屏幕尺寸的参数：

const breakpoints = {
  640: { slidesPerView: 2 },
  768: { slidesPerView: 3 },
  1024: { slidesPerView: 4 }
};

模板中应用：

<swiper :breakpoints="breakpoints">
  <!-- slides -->
</swiper>

自定义样式

覆盖默认样式需使用深度选择器：

<style scoped>
:deep(.swiper-pagination-bullet-active) {
  background-color: #ff0000;
}
</style>

完整组件示例

组合所有功能的完整组件：

<template>
  <swiper
    :modules="modules"
    :slides-per-view="1"
    :space-between="50"
    :pagination="{ clickable: true }"
    :autoplay="autoplayOptions"
    :breakpoints="breakpoints"
  >
    <swiper-slide v-for="(slide, index) in slides" :key="index">
      {{ slide }}
    </swiper-slide>
  </swiper>
</template>

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

export default {
  components: { Swiper, SwiperSlide },
  setup() {
    return {
      modules: [Navigation, Pagination, Autoplay],
      slides: ['Content 1', 'Content 2', 'Content 3'],
      autoplayOptions: { delay: 3000 },
      breakpoints: {
        640: { slidesPerView: 2 },
        1024: { slidesPerView: 3 }
      }
    };
  }
};
</script>