将卡片轮播赋能前端，打造视觉盛宴

2023-10-25 23:46:36

卡片轮播是一种常见的前端组件，它可以帮助用户在卡片之间轻松滑动。这种组件非常适合展示产品、图像或任何其他需要以美观的方式展示的内容。

卡片轮播组件的设计思路如下：

存在两个 div 元素，分别为 .image-list 和 .virtual-list。.image-list 包含了所有需要轮播的卡片，而 .virtual-list 则是一个虚拟的列表，它包含了所有卡片的副本。
当用户滑动卡片时，.virtual-list 会向左或向右移动。这种移动会带动 .image-list 一起移动，从而实现卡片的轮播。
为了实现卡片的动画效果，需要使用 CSS 动画或 JavaScript 动画。

下面是卡片轮播组件的代码实现：

<template>
  <div class="carousel">
    <div class="image-list">
      <img v-for="item in items" :src="item.src" alt="">
    </div>
    <div class="virtual-list">
      <img v-for="item in items" :src="item.src" alt="">
    </div>
    <div class="controls">
      <button @click="prev()"><</button>
      <button @click="next()">></button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { src: 'image1.jpg' },
        { src: 'image2.jpg' },
        { src: 'image3.jpg' },
      ],
      currentIndex: 0,
    }
  },
  methods: {
    prev() {
      if (this.currentIndex > 0) {
        this.currentIndex--;
      }
    },
    next() {
      if (this.currentIndex < this.items.length - 1) {
        this.currentIndex++;
      }
    },
  },
}
</script>

<style>
.carousel {
  width: 100%;
  height: 300px;
  overflow: hidden;
}

.image-list {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.virtual-list {
  position: absolute;
  left: 100%;
  top: 0;
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.controls {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.controls button {
  margin: 0 10px;
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fff;
  cursor: pointer;
}
</style>