vue2 实现 多轮播图

可以使用 Vue.js 的组件化思想来实现多个轮播图。

首先，根据需求分析，可以将每个轮播图封装成一个组件，每个组件有自己的数据源、样式以及轮播逻辑。这样可以避免不同轮播图之间的样式和逻辑冲突。

其次，在父组件中，引入多个轮播图组件，并将不同的数据源传递给每个组件。可以使用 props 来实现父组件向子组件传递数据。

最后，在每个轮播图组件中，根据传递过来的数据源，实现轮播逻辑。可以使用 Vue.js 的生命周期钩子函数来实现轮播图的自动切换和用户交互操作。同时，为了避免不同轮播图之间的冲突，可以使用 Vue.js 的作用域插槽来自定义轮播图的样式和内容。

下面是一个简单的示例代码：

<!-- 父组件 -->
<template>
  <div>
    <carousel :data="carousel1Data"></carousel>
    <carousel :data="carousel2Data"></carousel>
  </div>
</template>

<script>
import Carousel from './Carousel.vue'

export default {
  components: {
    Carousel
  },
  data() {
    return {
      carousel1Data: [
        { image: 'carousel1-1.jpg', title: 'Title 1', description: 'Description 1' },
        { image: 'carousel1-2.jpg', title: 'Title 2', description: 'Description 2' },
        { image: 'carousel1-3.jpg', title: 'Title 3', description: 'Description 3' }
      ],
      carousel2Data: [
        { image: 'carousel2-1.jpg', title: 'Title 1', description: 'Description 1' },
        { image: 'carousel2-2.jpg', title: 'Title 2', description: 'Description 2' },
        { image: 'carousel2-3.jpg', title: 'Title 3', description: 'Description 3' }
      ]
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <div class="carousel">
    <div class="carousel-slides">
      <div class="carousel-slide"
        :class="{ active: index === currentIndex }"
        v-for="(item, index) in data"
        :key="index"
        :style="{ backgroundImage: 'url(' + item.image + ')' }"
        @click="handleSlideClick(index)">
        <div class="carousel-slide-content">
          <h1>{{ item.title }}</h1>
          <p>{{ item.description }}</p>
        </div>
      </div>
    </div>
    <div class="carousel-nav">
      <div class="carousel-nav-item"
        :class="{ active: index === currentIndex }"
        v-for="(item, index) in data"
        :key="index"
        @click="handleNavItemClick(index)"></div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      currentIndex: 0
    }
  },
  mounted() {
    this.timer = setInterval(this.next, 3000)
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  methods: {
    next() {
      this.currentIndex = (this.currentIndex + 1) % this.data.length
    },
    handleSlideClick(index) {
      this.currentIndex = index
    },
    handleNavItemClick(index) {
      this.currentIndex = index
    }
  }
}
</script>