vue中实现轮播图

使用 Vue-Awesome-Swiper 实现轮播图

Vue-Awesome-Swiper 是基于 Swiper 的 Vue 封装组件，支持 Swiper 的所有功能，适合复杂轮播需求。

安装依赖：

npm install swiper vue-awesome-swiper --save

基础实现：

<template>
  <swiper :options="swiperOption">
    <swiper-slide v-for="(slide, index) in slides" :key="index">
      <img :src="slide.image" />
    </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: require('@/assets/slide1.jpg') },
        { image: require('@/assets/slide2.jpg') }
      ],
      swiperOption: {
        pagination: {
          el: '.swiper-pagination'
        },
        autoplay: {
          delay: 3000
        },
        loop: true
      }
    }
  }
}
</script>

使用纯 Vue 实现简单轮播

对于简单需求可以直接用 Vue 实现，无需额外依赖。

<template>
  <div class="carousel">
    <div class="slides" :style="{ transform: `translateX(-${currentIndex * 100}%)` }">
      <div v-for="(slide, index) in slides" :key="index" class="slide">
        <img :src="slide.image" />
      </div>
    </div>
    <button @click="prev">Prev</button>
    <button @click="next">Next</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentIndex: 0,
      slides: [
        { image: require('@/assets/slide1.jpg') },
        { image: require('@/assets/slide2.jpg') }
      ]
    }
  },
  methods: {
    next() {
      this.currentIndex = (this.currentIndex + 1) % this.slides.length
    },
    prev() {
      this.currentIndex = (this.currentIndex - 1 + this.slides.length) % this.slides.length
    }
  },
  mounted() {
    setInterval(this.next, 3000)
  }
}
</script>

<style>
.carousel {
  overflow: hidden;
  position: relative;
}
.slides {
  display: flex;
  transition: transform 0.5s ease;
}
.slide {
  min-width: 100%;
}
</style>

使用 Element UI 的 Carousel 组件

如果项目使用 Element UI，可以直接使用其 Carousel 组件。

安装 Element UI：

npm install element-ui

实现代码：

<template>
  <el-carousel :interval="3000" type="card" height="200px">
    <el-carousel-item v-for="item in slides" :key="item.id">
      <img :src="item.image" style="width:100%">
    </el-carousel-item>
  </el-carousel>
</template>

<script>
export default {
  data() {
    return {
      slides: [
        { id: 1, image: require('@/assets/slide1.jpg') },
        { id: 2, image: require('@/assets/slide2.jpg') }
      ]
    }
  }
}
</script>

实现无限循环轮播

通过动态修改 slides 数组实现无缝循环效果。

<template>
  <div class="carousel">
    <div class="slides" :style="{ transform: `translateX(-${currentIndex * 100}%)` }">
      <div v-for="(slide, index) in slides" :key="index" class="slide">
        <img :src="slide.image" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentIndex: 1,
      slides: [
        { image: require('@/assets/slide3.jpg') }, // 最后一张
        { image: require('@/assets/slide1.jpg') }, // 实际第一张
        { image: require('@/assets/slide2.jpg') }, // 实际第二张
        { image: require('@/assets/slide3.jpg') }, // 实际第三张
        { image: require('@/assets/slide1.jpg') }  // 第一张
      ]
    }
  },
  methods: {
    next() {
      this.currentIndex++
      if (this.currentIndex === this.slides.length - 1) {
        setTimeout(() => {
          this.currentIndex = 1
        }, 500)
      }
    }
  },
  mounted() {
    setInterval(this.next, 3000)
  }
}
</script>