【vue+css】实现叠层轮播图切换组件

<template>
  <div class="carousel-container">
    <div class="carousel-wrapper" :style="carouselStyle">
      <div
        class="carousel-item"
        v-for="(item, index) in items"
        :key="index"
        :style="{ backgroundImage: `url(${item.imageUrl})` }"
      ></div>
    </div>
  </div>
</template>
 
<script>
export default {
  name: 'StackedCarousel',
  props: {
    items: {
      type: Array,
      required: true
    },
    height: {
      type: String,
      required: true
    }
  },
  computed: {
    carouselStyle() {
      return {
        '--carousel-height': this.height
      };
    }
  }
};
</script>
 
<style scoped>
.carousel-container {
  position: relative;
  width: 100%;
  height: var(--carousel-height);
  overflow: hidden;
}
 
.carousel-wrapper {
  display: flex;
  height: 100%;
  transform: translateX(0);
  transition: transform 0.5s ease-in-out;
}
 
.carousel-item {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}
</style>

这个简单的Vue组件展示了如何使用Vue和CSS创建一个基本的叠层轮播组件。carousel-wrapper 使用 flexbox 布局，并且通过 CSS 变量 --carousel-height 接受来自父组件的高度传递。每个 .carousel-item 使用 CSS 的 background-image 属性来展示传入的图片。这个例子简单易懂，并且可以作为构建更复杂轮播组件的基础。