swiper实现vue轮播

安装 Swiper 依赖

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

npm install swiper vue-awesome-swiper

引入 Swiper 组件

在需要使用的 Vue 文件中引入 Swiper 和配套样式：

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

基础轮播实现

在模板中使用 Swiper 组件，并绑定基础配置：

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

添加导航控制

引入导航模块并配置导航按钮：

import { Navigation } from 'swiper/modules'

export default {
  setup() {
    const onSwiper = (swiper) => {
      console.log(swiper)
    }
    const onSlideChange = () => {
      console.log('slide change')
    }
    return {
      modules: [Navigation],
      onSwiper,
      onSlideChange,
      slides: ['Slide 1', 'Slide 2', 'Slide 3']
    }
  }
}

添加分页指示器

引入分页模块并配置分页样式：

import { Pagination } from 'swiper/modules'

// 在组件配置中添加
modules: [Pagination],

模板中添加分页容器：

<swiper
  :modules="modules"
  :pagination="{ clickable: true }"
>
  <!-- slides -->
</swiper>

响应式配置

通过 breakpoints 参数实现响应式布局：

:breakpoints="{
  320: {
    slidesPerView: 1,
    spaceBetween: 20
  },
  768: {
    slidesPerView: 2,
    spaceBetween: 30
  },
  1024: {
    slidesPerView: 3,
    spaceBetween: 40
  }
}"

自动播放功能

引入自动播放模块并配置：

import { Autoplay } from 'swiper/modules'

// 在组件配置中添加
modules: [Autoplay],
:autoplay="{
  delay: 2500,
  disableOnInteraction: false
}"

完整示例代码

<template>
  <swiper
    :modules="modules"
    :slides-per-view="3"
    :space-between="50"
    :pagination="{ clickable: true }"
    :autoplay="{ delay: 2500 }"
    :breakpoints="breakpoints"
    @swiper="onSwiper"
    @slideChange="onSlideChange"
  >
    <swiper-slide v-for="(item, index) in slides" :key="index">
      <div class="slide-content">{{ item }}</div>
    </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() {
    const onSwiper = (swiper) => {
      console.log(swiper)
    }
    const onSlideChange = () => {
      console.log('slide change')
    }
    return {
      modules: [Navigation, Pagination, Autoplay],
      onSwiper,
      onSlideChange,
      slides: ['Slide 1', 'Slide 2', 'Slide 3', 'Slide 4', 'Slide 5'],
      breakpoints: {
        320: {
          slidesPerView: 1,
          spaceBetween: 20
        },
        768: {
          slidesPerView: 2,
          spaceBetween: 30
        },
        1024: {
          slidesPerView: 3,
          spaceBetween: 40
        }
      }
    }
  }
}
</script>

<style>
.slide-content {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eee;
  border-radius: 8px;
}
</style>