vue2 实现 多轮播图

1. 安装 vue-awesome-swiper 插件

首先，我们需要在项目中安装 vue-awesome-swiper 插件，它是一个基于 Swiper 的轮播图组件。

npm install vue-awesome-swiper --save

2. 引入并注册组件

在需要使用轮播图的页面中，引入并注册 Swiper 组件。

<template>
  <div class="swiper-container">
    <swiper :options="swiperOption1">
      <swiper-slide v-for="(slide, index) in slides1" :key="index">
        <img :src="slide.image" alt="">
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>

    <swiper :options="swiperOption2">
      <swiper-slide v-for="(slide, index) in slides2" :key="index">
        <img :src="slide.image" alt="">
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
  import { Swiper, SwiperSlide } from 'vue-awesome-swiper'

  export default {
    components: {
      Swiper,
      SwiperSlide
    },
    data() {
      return {
        slides1: [
          { image: require('./assets/slide1.jpg') },
          { image: require('./assets/slide2.jpg') },
          { image: require('./assets/slide3.jpg') }
        ],
        slides2: [
          { image: require('./assets/slide4.jpg') },
          { image: require('./assets/slide5.jpg') },
          { image: require('./assets/slide6.jpg') }
        ],
        swiperOption1: {
          pagination: {
            el: '.swiper-pagination'
          }
        },
        swiperOption2: {
          pagination: {
            el: '.swiper-pagination'
          }
        }
      }
    }
  }
</script>

在上面的代码中，我们定义了两个轮播图，分别使用了不同的图片。在 data 中定义了两个数组 slides1 和 slides2，分别存储了每个轮播图的图片信息。同时为每个轮播图定义了不同的 swiperOption 配置。

3. CSS 样式

最后，我们需要为轮播图添加一些样式。

.swiper-container {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.swiper-pagination {
  bottom: 10px;
}

至此，我们就实现了多轮播图的效果。