vue swiper 自定义分页器及动效

<template>
  <div class="components-container">
    <swiper :options="mySwiperOption"
            ref="mySwiper"
            @slideChangeEnd='slideChange'>
      <swiper-slide v-for=" i in 3"
                    :key="i">
        <img :src="httpImageUrl[i-1]"
             width="100%"
             @click="onClick(i)" />
      </swiper-slide>
      <div class="swiper-pagination"
           slot="pagination"></div>
    </swiper>
    <div class="ditBox">
      <div class="dit"
           :class="{'actived':id===i}"
           v-for="i in 3"
           :key="i"
           @click="setIndex(i)"></div>
    </div>
  </div>
</template>

<script>
//页面引入swiper
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'

export default {
  name: 'ContentAudit',
  components: {
    swiper,
    swiperSlide
  },
  data () {
    let vm = this
    return {
      id: null,
      mySwiperOption: {
        pagination: {
          el: '.swiper-pagination', //与slot="pagination"处 class 一致
          clickable: true, //轮播按钮支持点击
          // paginationCustomRender: function (swiper, current, total) {
          //   var customPaginationHtml = "";
          //   for (var i = 0; i < total; i++) {
          //     //判断哪个分页器此刻应该被激活
          //     if (i == current - 1) {
          //       customPaginationHtml +=
          //         '<span class="swiper-pagination-customs swiper-pagination-customs-active"></span>';
          //     } else {
          //       customPaginationHtml +=
          //         '<span class="swiper-pagination-customs"></span>';
          //     }
          //   }
          //   return '<span class="swiperPag">' + customPaginationHtml + '</span>';
          // }
        },
        //自动播放
        autoplay: {
          delay: 3000,
          disableOnInteraction: false
        },
        //循环
        loop: true,
        on: {
          init: function (swiper) {
            //Swiper初始化了
            alert('当前的slide序号是' + this.activeIndex + '当前的realIndex序号是' + this.realIndex);//或者swiper.activeIndex，swiper与this都可指代当前swiper实例

            vm.id = this.realIndex + 1
            this.emit('transitionEnd');//在初始化时触发一次transitionEnd事件，需要先设置transitionEnd

          },
        },
        transitionEnd: function (swiper, realIndex) {
          //Swiper初始化了
          console.log('9999', this.realIndex)
          // alert('当前的slide序号是' + this.activeIndex);//或者swiper.activeIndex，swiper与this都可指代当前swiper实例
          // this.emit('transitionEnd');//在初始化时触发一次transitionEnd事件，需要先设置transitionEnd

        },
      },
      httpImageUrl: ['https://pics4.baidu.com/feed/d52a2834349b033b931245d4d14e0bdfd439bdb7.jpeg@f_auto?token=07cdf75443b8506e7a855325bed8d21a',
        "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F013fe45544a15e0000019ae9049657.jpg%401280w_1l_2o_100sh.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663827624&t=884f3f882f3070c1168c89864ae1c289",
        'https://pics7.baidu.com/feed/43a7d933c895d14300d90fb057cfbe0e5baf0745.jpeg@f_auto?token=b95d13332f937dc8fdc0bfdc34eaec87']

    }
  },
  methods: {
    slideChange () {
      let activeIndex = this.$refs.mySwiper.swiper.activeIndex
      let realIndex = this.$refs.mySwiper.swiper.realIndex
      console.log('activeIndex', activeIndex)
      console.log('realIndex', realIndex)
      this.id = realIndex + 1
    },
    setIndex (i) {
      console.log('setIndex', i - 1)
      this.id = i - 1
      this.$refs.mySwiper.swiper.slideToLoop(i - 1, 1000, false)
    }
  }
}
</script>


<style >
.ditBox {
  width: 100%;
  display: flex;
  justify-content: center;
}
.dit {
  margin-right: 20px;
  width: 10px;
  height: 10px;
  background: #ccc;
  transition: all 10s;
}
.actived {
  width: 20px;
  background: #d70c0c;
}
.swiper-pagination-customs {
  display: inline-block;
  width: 5px;
  height: 5px;
  background: red;
  margin-right: 10px;
  transition: all 1s;
}
.swiper-pagination-customs-active {
  width: 20px;
  background: #fff;
}
</style>