vue 实现旋转木马

Vue 实现旋转木马效果

旋转木马（Carousel）效果在网页中常用于展示图片或卡片，通过滑动或自动轮播的方式切换内容。以下是基于 Vue 3 的实现方法。

基础实现（基于 CSS 和 Vue）

创建一个简单的旋转木马组件，依赖 CSS 过渡和 Vue 的状态管理。

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

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

export default {
  setup() {
    const items = ['Item 1', 'Item 2', 'Item 3', 'Item 4'];
    const currentIndex = ref(0);

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

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

    return { items, currentIndex, next, prev };
  },
};
</script>

<style>
.carousel-container {
  overflow: hidden;
  position: relative;
  width: 300px;
  height: 200px;
}

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

.carousel-item {
  flex: 0 0 100%;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eee;
  border: 1px solid #ccc;
}
</style>

使用第三方库（Swiper）

对于更复杂的需求（如触摸滑动、自动轮播），推荐使用 Swiper 库。Swiper 提供了丰富的配置和响应式支持。

安装 Swiper：

npm install swiper

在 Vue 中集成 Swiper：

<template>
  <swiper
    :slides-per-view="3"
    :space-between="50"
    @swiper="onSwiper"
    @slideChange="onSlideChange"
  >
    <swiper-slide v-for="(item, index) in items" :key="index">
      {{ item }}
    </swiper-slide>
  </swiper>
</template>

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

export default {
  components: { Swiper, SwiperSlide },
  setup() {
    const items = ['Slide 1', 'Slide 2', 'Slide 3', 'Slide 4'];
    const onSwiper = (swiper) => {
      console.log(swiper);
    };
    const onSlideChange = () => {
      console.log('slide change');
    };
    return { items, onSwiper, onSlideChange };
  },
};
</script>

自动轮播功能

通过 Swiper 的 autoplay 插件实现自动轮播：

<template>
  <swiper
    :modules="modules"
    :slides-per-view="3"
    :space-between="50"
    :autoplay="{ delay: 2500 }"
  >
    <swiper-slide v-for="(item, index) in items" :key="index">
      {{ item }}
    </swiper-slide>
  </swiper>
</template>

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

export default {
  components: { Swiper, SwiperSlide },
  setup() {
    const items = ['Slide 1', 'Slide 2', 'Slide 3', 'Slide 4'];
    const modules = [Autoplay];
    return { items, modules };
  },
};
</script>

响应式设计

通过 Swiper 的 breakpoints 配置实现不同屏幕尺寸下的适配：

<swiper
  :breakpoints="{
    320: { slidesPerView: 1 },
    768: { slidesPerView: 2 },
    1024: { slidesPerView: 3 },
  }"
>
  <!-- slides -->
</swiper>

自定义过渡动画

如果需要自定义动画效果，可以通过 CSS 或 JavaScript 动态控制样式：

const next = () => {
  currentIndex.value = (currentIndex.value + 1) % items.length;
  // 添加动画类
  document.querySelector('.carousel').classList.add('animate');
  setTimeout(() => {
    document.querySelector('.carousel').classList.remove('animate');
  }, 500);
};

.animate {
  transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}

以上方法覆盖了从基础实现到高级功能的旋转木马效果，可根据实际需求选择适合的方案。