当前位置：首页 > VUE

使用vue实现轮播图

2026-02-22 14:13:24VUE

安装依赖

确保项目已安装 Vue 和 Swiper 库。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 和 SwiperSlide 组件构建轮播图结构，并配置基础参数。

<template>
  <swiper
    :slides-per-view="1"
    :space-between="50"
    :pagination="{ clickable: true }"
    :navigation="true"
  >
    <swiper-slide v-for="(slide, index) in slides" :key="index">
      <img :src="slide.image" :alt="slide.title" />
    </swiper-slide>
  </swiper>
</template>

<script>
export default {
  data() {
    return {
      slides: [
        { image: 'image1.jpg', title: 'Slide 1' },
        { image: 'image2.jpg', title: 'Slide 2' },
      ],
    };
  },
};
</script>

自定义样式与动画

通过 CSS 调整轮播图样式，或使用 Swiper 的动画效果（如淡入淡出）。

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.swiper-slide img {
  width: 100%;
  height: auto;
}

响应式配置

根据屏幕宽度动态调整轮播图的显示数量。

<swiper
  :breakpoints="{
    640: { slidesPerView: 1 },
    768: { slidesPerView: 2 },
    1024: { slidesPerView: 3 },
  }"
>
</swiper>

自动播放与循环

启用自动播放和无限循环功能。

<swiper
  :autoplay="{ delay: 2500, disableOnInteraction: false }"
  :loop="true"
>
</swiper>

事件处理

监听 Swiper 事件（如滑动结束），执行自定义逻辑。

使用vue实现轮播图

<swiper @slideChange="onSlideChange">
</swiper>

<script>
export default {
  methods: {
    onSlideChange(swiper) {
      console.log('当前幻灯片索引:', swiper.activeIndex);
    },
  },
};
</script>