当前位置：首页 > VUE

vue实现轮播视频

2026-01-18 15:00:05VUE

使用Swiper实现轮播视频

安装Swiper库和Vue对应的Swiper组件

npm install swiper vue-awesome-swiper

在组件中引入Swiper

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

模板中使用Swiper组件

<swiper
  :slides-per-view="1"
  :space-between="50"
  @swiper="onSwiper"
  @slideChange="onSlideChange"
>
  <swiper-slide v-for="(video, index) in videos" :key="index">
    <video controls :src="video.src"></video>
  </swiper-slide>
</swiper>

自定义视频轮播组件

创建基础视频轮播组件结构

export default {
  data() {
    return {
      currentIndex: 0,
      videos: [
        { src: 'video1.mp4' },
        { src: 'video2.mp4' }
      ]
    }
  }
}

添加导航控制功能

<div class="video-carousel">
  <video :src="videos[currentIndex].src" controls></video>
  <button @click="prev">上一个</button>
  <button @click="next">下一个</button>
</div>

实现导航方法

methods: {
  prev() {
    this.currentIndex = (this.currentIndex - 1 + this.videos.length) % this.videos.length
  },
  next() {
    this.currentIndex = (this.currentIndex + 1) % this.videos.length
  }
}

自动轮播功能

添加自动播放功能

data() {
  return {
    interval: null,
    autoPlay: true,
    intervalTime: 3000
  }
},
mounted() {
  this.startAutoPlay()
},
methods: {
  startAutoPlay() {
    this.interval = setInterval(this.next, this.intervalTime)
  },
  stopAutoPlay() {
    clearInterval(this.interval)
  }
}

响应式设计

添加响应式断点

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

在Swiper组件中使用断点

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

视频预加载优化

添加懒加载功能

import { Lazy } from 'swiper'
import 'swiper/css/lazy'

// 在Swiper配置中添加
modules: [Lazy]

模板中使用懒加载

<swiper-slide>
  <video data-src="video.mp4" class="swiper-lazy"></video>
  <div class="swiper-lazy-preloader"></div>
</swiper-slide>

添加过渡动画

CSS过渡效果

vue实现轮播视频

.video-carousel {
  transition: all 0.5s ease;
}

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