当前位置：首页 > VUE

轮播vue实现

2026-01-13 03:58:46VUE

使用 Vue 实现轮播功能

基础轮播实现

安装依赖（如使用第三方库）
推荐使用 vue-awesome-swiper 或 swiper：

npm install swiper vue-awesome-swiper

基础模板结构

<template>
  <swiper :options="swiperOptions">
    <swiper-slide v-for="(item, index) in slides" :key="index">
      <img :src="item.image" alt="Slide">
    </swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
</template>

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

export default {
  components: { Swiper, SwiperSlide },
  data() {
    return {
      slides: [
        { image: 'path/to/image1.jpg' },
        { image: 'path/to/image2.jpg' }
      ],
      swiperOptions: {
        pagination: { el: '.swiper-pagination' },
        loop: true,
        autoplay: { delay: 3000 }
      }
    }
  }
}
</script>

自定义过渡效果

通过 CSS 实现淡入淡出

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

结合 Vue 过渡组件

<transition-group name="fade" tag="div" class="carousel">
  <div v-for="slide in slides" :key="slide.id" class="slide">
    <img :src="slide.image">
  </div>
</transition-group>

手动控制轮播

添加导航按钮

<swiper ref="mySwiper">
  <!-- slides -->
  <button @click="prev">Previous</button>
  <button @click="next">Next</button>
</swiper>

<script>
methods: {
  prev() {
    this.$refs.mySwiper.$swiper.slidePrev()
  },
  next() {
    this.$refs.mySwiper.$swiper.slideNext()
  }
}
</script>

响应式适配

根据屏幕宽度调整参数

swiperOptions: {
  breakpoints: {
    640: { slidesPerView: 1 },
    768: { slidesPerView: 2 },
    1024: { slidesPerView: 3 }
  }
}

纯 Vue 实现（无依赖）

核心逻辑示例

<script>
export default {
  data() {
    return {
      currentIndex: 0,
      slides: [/*...*/],
      interval: null
    }
  },
  mounted() {
    this.startAutoPlay()
  },
  methods: {
    startAutoPlay() {
      this.interval = setInterval(() => {
        this.currentIndex = (this.currentIndex + 1) % this.slides.length
      }, 3000)
    },
    goToSlide(index) {
      this.currentIndex = index
    }
  },
  beforeDestroy() {
    clearInterval(this.interval)
  }
}
</script>