公司门户有好多个轮播效果，首先我就想到了swiper这个大佬
在vue2中引用还是有一些需要注意的地方

建议大家使用低版本

"devDependencies":{
 "swiper": "^5.4.5",
}

安装完成后，在页面使用如下

   <swiper
      class="swiper-product "
      :options="swiperOptions"
      @swiper="onSwiper"
      @slideChange="onSlideChange"
      ref="productSwiper"
    >
    <swiper-slide v-for="(item,index) in images" :key="index">
        <div class="flex flex-column slide align-center">
          <img :src="item">
          <div class="slide-btn font-16 z-index2">制动器总成{{ index }}</div>
        </div>
      </swiper-slide>

    </swiper>
    <div class="my-swiper-btn mt-5">
      <div class="swiper-btn button-prev" @click="slideTo('prev')">&lt;</div>
      <div class="swiper-btn button-next" @click="slideTo('next')">&gt;</div>
    </div>


  <div class="swiper-pagination"></div>

配置项：

<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
export default {
  name: 'Product',
  components: {
    Swiper,
    SwiperSlide
  },
  data () {
    return {
      swiperOptions: {
        autoplay: true,
        loop: true,
        slidesPerView: 4，
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
          renderBullet: function (index, className) {
            return '<span class="' + className + '">' + (index + 1) + '</span>'
          }
        }
      },
      images: [
          require('@/assets/images/index/1615252544296488.png'),
          require('@/assets/images/index/1615518122637589.png'),
          require('@/assets/images/index/1615252222913033.png'),
          require('@/assets/images/index/1615167796974510.png'),
          require('@/assets/images/index/1615252363569403.png')
      ]
    }
  },
  computed: {
  // 获取swiper对象
    swiper () {
      return this.$refs.productSwiper.$swiper
    }
  },
  methods: {
    // 自定义单页方法
    slideTo (type) {
      if (type === 'prev') {
        this.swiper.slidePrev()
      } else {
        this.swiper.slideNext()
      }

      setTimeout(() => {
        this.swiper.autoplay.start()
      }, 2000)
    },
    onSwiper (swiper) {
      // console.log(swiper)
    },
    onSlideChange () {
      // console.log('slide change')
    }
  }
}
</script>

上下翻页效果

image.png

分页器效果

image.png

样式补充（分页器效果css部分）

 .swiper-pagination{
        bottom: 29px;
        right: 0;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        height: 30px;

        /deep/.swiper-pagination-bullet{
          color: white;
          padding: 4px;
          background: transparent;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 22px;
          height: 22px;
          border: 1px solid #dddddd;
          margin:0 5px;
          border-radius: 0;
          opacity: 1;
        }

        /deep/ .swiper-pagination-bullet-active{
          background-color: rgb(204, 0, 0);
          border-color: rgb(204, 0, 0);
        }
      }