vue3实现轮播

Vue3 实现轮播的方法

使用原生 Vue3 实现轮播

通过 Vue3 的 Composition API 和动态绑定样式实现基础轮播功能。

<template>
  <div class="carousel-container">
    <div class="carousel-track" :style="{ transform: `translateX(${-currentIndex * 100}%)` }">
      <div v-for="(item, index) in items" :key="index" class="carousel-item">
        {{ item }}
      </div>
    </div>
    <button @click="prev">Prev</button>
    <button @click="next">Next</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const items = ['Slide 1', 'Slide 2', 'Slide 3'];
const currentIndex = ref(0);

const next = () => {
  currentIndex.value = (currentIndex.value + 1) % items.length;
};

const prev = () => {
  currentIndex.value = (currentIndex.value - 1 + items.length) % items.length;
};
</script>

<style>
.carousel-container {
  overflow: hidden;
  position: relative;
  width: 100%;
}

.carousel-track {
  display: flex;
  transition: transform 0.5s ease;
}

.carousel-item {
  flex: 0 0 100%;
  min-width: 100%;
}
</style>

使用第三方库 Swiper

Swiper 是一个流行的轮播库，支持 Vue3 集成。

安装 Swiper：

npm install swiper@latest

在 Vue3 中使用：

<template>
  <swiper
    :slides-per-view="1"
    :space-between="50"
    @swiper="onSwiper"
    @slideChange="onSlideChange"
  >
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
  </swiper>
</template>

<script setup>
import { ref } from 'vue';
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';

const onSwiper = (swiper) => {
  console.log(swiper);
};

const onSlideChange = () => {
  console.log('slide change');
};
</script>

自动轮播功能

通过定时器实现自动轮播，注意组件卸载时清除定时器。

<template>
  <div class="carousel-container">
    <div class="carousel-track" :style="{ transform: `translateX(${-currentIndex * 100}%)` }">
      <div v-for="(item, index) in items" :key="index" class="carousel-item">
        {{ item }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

const items = ['Slide 1', 'Slide 2', 'Slide 3'];
const currentIndex = ref(0);
let intervalId = null;

const startAutoPlay = () => {
  intervalId = setInterval(() => {
    currentIndex.value = (currentIndex.value + 1) % items.length;
  }, 3000);
};

onMounted(() => {
  startAutoPlay();
});

onUnmounted(() => {
  clearInterval(intervalId);
});
</script>

添加指示器和导航按钮

增强用户体验的常见功能实现。

<template>
  <div class="carousel-container">
    <div class="carousel-track" :style="{ transform: `translateX(${-currentIndex * 100}%)` }">
      <div v-for="(item, index) in items" :key="index" class="carousel-item">
        {{ item }}
      </div>
    </div>
    <div class="indicators">
      <span 
        v-for="(item, index) in items" 
        :key="index" 
        :class="{ active: currentIndex === index }"
        @click="goToSlide(index)"
      ></span>
    </div>
    <button class="prev" @click="prev">❮</button>
    <button class="next" @click="next">❯</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const items = ['Slide 1', 'Slide 2', 'Slide 3'];
const currentIndex = ref(0);

const next = () => {
  currentIndex.value = (currentIndex.value + 1) % items.length;
};

const prev = () => {
  currentIndex.value = (currentIndex.value - 1 + items.length) % items.length;
};

const goToSlide = (index) => {
  currentIndex.value = index;
};
</script>

<style>
.indicators {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.indicators span {
  width: 10px;
  height: 10px;
  margin: 0 5px;
  border-radius: 50%;
  background-color: #ccc;
  cursor: pointer;
}

.indicators span.active {
  background-color: #333;
}

.prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
}

.prev {
  left: 10px;
}

.next {
  right: 10px;
}
</style>