vue2+ VueAwesomeSwiper 自己写分页器控制

vue2轮播图实现效果这里就不展示了，由于根据UI图，需要将一页展示两张图片，并且下面的分页器，要改成左右两个箭头的形式。

轮播图实现的用的是，VueAwesomeSwiper，这里附一下swiper官网：
https://www.swiper.com.cn/api/index.html
main.js 中使用

import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)

之后在组件里面正常使用就可以了
具体的轮播图的代码就不写了，主要是下面的左右箭头的实现。

<swiper
  ref="mySwiper"
  :options="swiperOption"
  @swiper="onSwiper"
  @slideChange="onSlideChange"
  class="swiper-wrapper"
 >
     <swiper-slide>
         <img src="" />
     </swiper-silde>
     <swiper-slide>
         <img src="" />
     </swiper-silde>
     <swiper-slide>
         <img src="" />
     </swiper-silde>
      <swiper-slide>
         <img src="" />
     </swiper-silde>
     <swiper-slide>
         <img src="" />
     </swiper-silde>
</swiper>
<div class="ownSwiper">
   <div class="swiperBtn button-prev" :class="swiperIndex === 0 ? 'btn-disabled' : ''" @click="prev()"></div>
   <div class="swiperBtn button-next" :class="swiperIndex === 2 ? 'btn-disabled' : ''" @click="next()"></div>
</div>

data() {
    return {
        swiperOption: {
            loop: false,
            autoplay: false,  // 自动轮播
            slidesPerView: 2 // 一页显示多少图片 这里是2张
      },
      swiperIndex: 0  // 轮播的索引
    }
},
mounted() {
    this.swiperIndex = this.$refs.mySwiper.swiper.realIndex  // 这里是获取 一开始的 索引，是0 需要将按钮置灰
  },
  methods: {
    onSwiper() {
    },
    onSlideChange() {},
    // 上一张
    prev() {
      this.$refs.mySwiper.swiper.slidePrev()
      this.swiperIndex = this.$refs.mySwiper.swiper.realIndex
    },
    // 下一张
    next() {
      this.$refs.mySwiper.swiper.slideNext()
      this.swiperIndex = this.$refs.mySwiper.swiper.realIndex
    }
  }

<style>
    .swiper {
    width: 100%;
    height: 519px;
  }
  .swiper-pagination {
    display: flex;
    flex-direction: row;
    justify-content: center;
    transform: none;
    position: absolute!important;
    bottom: -3.2rem;
    left: 0;
    width: 100%;
  }
  .swiper-slide {
    width: 630px !important;
    margin-right: 30px;
  }
  .ownSwiper {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 100%;
    margin-top: -3rem;
    .swiperBtn {
      border: 0;
      box-shadow: 0 0.25rem 0.75rem rgba(30,34,40,.02);
      width: 2.2rem;
      height: 2.2rem;
      line-height: inherit;
      border-radius: 100%;
      text-shadow: none;
      transition: all .2s ease-in-out;
      background: rgba(var(--bs-primary-rgb),.9)!important;
      margin: 0 0.2rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .btn-disabled {
      background: rgba(var(--bs-primary-rgb),.7)!important;
      opacity: .35;
      cursor: auto;
      pointer-events: none;
    }
    .button-prev:after {
      content: "\e949";
      font-family: Unicons;
      font-size: 1.2rem;
      color: var(--bs-white)!important;
    }
    .button-next:after {
      content: "\e94c";
      font-family: Unicons;
      font-size: 1.2rem;
      color: var(--bs-white)!important;
    }
  }
</style>

可以自行更改 swiper自己的分页器，type改成custom 就可以自定义了，官网里面都有，但是由于自己是个小白，改的很艰难，最后果断放弃。