vue轮播图实现方法

使用Swiper插件实现

安装Swiper及相关Vue组件库：

npm install swiper vue-awesome-swiper

基础实现代码示例：

<template>
  <swiper :options="swiperOption">
    <swiper-slide v-for="(slide, index) in slides" :key="index">
      <img :src="slide.image" alt="">
    </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>

纯CSS实现方案

通过CSS动画实现简单轮播：

<template>
  <div class="carousel">
    <div class="slides" :style="slideStyle">
      <div v-for="(item, index) in items" :key="index" class="slide">
        <img :src="item.img" alt="">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { img: require('@/assets/slide1.jpg') },
        { img: require('@/assets/slide2.jpg') }
      ],
      currentIndex: 0,
      interval: null
    }
  },
  computed: {
    slideStyle() {
      return {
        transform: `translateX(-${this.currentIndex * 100}%)`
      }
    }
  },
  mounted() {
    this.interval = setInterval(() => {
      this.currentIndex = (this.currentIndex + 1) % this.items.length
    }, 3000)
  },
  beforeDestroy() {
    clearInterval(this.interval)
  }
}
</script>

<style>
.carousel {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 300px;
}
.slides {
  display: flex;
  transition: transform 0.5s ease;
  height: 100%;
}
.slide {
  flex: 0 0 100%;
  height: 100%;
}
.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>

使用Vant组件库

安装Vant UI库：

npm install vant

实现代码示例：

<template>
  <van-swipe :autoplay="3000">
    <van-swipe-item v-for="(image, index) in images" :key="index">
      <img :src="image" />
    </van-swipe-item>
  </van-swipe>
</template>

<script>
import { Swipe, SwipeItem } from 'vant';

export default {
  components: {
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem
  },
  data() {
    return {
      images: [
        require('@/assets/slide1.jpg'),
        require('@/assets/slide2.jpg')
      ]
    };
  }
};
</script>

响应式轮播实现

通过监听窗口大小调整轮播参数：

data() {
  return {
    swiperOption: {
      slidesPerView: 1,
      spaceBetween: 10,
      breakpoints: {
        640: {
          slidesPerView: 2
        },
        1024: {
          slidesPerView: 3
        }
      }
    }
  }
}

自定义指示器和导航按钮

添加自定义控制元素：

<template>
  <div class="swiper-container">
    <swiper ref="mySwiper" :options="swiperOption">
      <!-- slides内容 -->
    </swiper>
    <div class="custom-pagination"></div>
    <button @click="prev">上一张</button>
    <button @click="next">下一张</button>
  </div>
</template>

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