vuecli4 使用swiper加自定义pagination

1. 安装：

• npm install swiper vue-awesome-swiper --save

2. main.js加进去

• import VueAwesomeSwiper from "vue-awesome-swiper";
• import SwiperCore, { Navigation, Pagination, A11y, Autoplay } from "swiper";
• SwiperCore.use([Navigation, Pagination, A11y, Autoplay]);
• import "swiper/swiper-bundle.css";
• Vue.use(VueAwesomeSwiper);

3. 使用

    <swiper ref="mySwiper" class="swiper" :options="swiperOption">
    <swiper-slide
      ><img src="../assets/645X741/1.png" width="450" alt=""
    /></swiper-slide>
    <swiper-slide
      ><img src="../assets/645X741/2.png" width="450" alt=""
    /></swiper-slide>
    <swiper-slide
      ><img src="../assets/645X741/3.png" width="450" alt=""
    /></swiper-slide>
    <swiper-slide
      ><img src="../assets/645X741/4.png" width="450" alt=""
    /></swiper-slide>
   
    <div
      class="swiper-pagination"
      slot="pagination"
      @click="fy($event)"
    ></div>
    <div class="swiper-button-prev" slot="button-prev"></div>
    <div class="swiper-button-next" slot="button-next"></div>
    </swiper>
    
   

data () {
    return {
      swiperOption: {
        loop: true,
        initialSlide: 0, // 设定初始化时slide的索引，默认为0
        spaceBetween: 30,
        centeredSlides: true,
        // autoplay: {
        //   delay: 2500,
        //   disableOnInteraction: false,
        // },
        pagination: {
          el: ".swiper-pagination",
          dynamicBullets: false,
          type: 'custom',
          clickable: true,
          renderCustom: function (swiper, current, total) {
            var paginationHtml = '';
            var text = ['../assets/645X741/1.png', '../assets/645X741/2.png', '../assets/645X741/3.png', '../assets/645X741/4.png']
            for (var i = 1; i <= total; i++) {
              if (i == current) {
                paginationHtml += `<div class='pagination pagination_active'><div class="fy${i}" index="${i}">${i}</div></div>`
              } else {
                paginationHtml += `<div class='pagination'>
                        <div class="fy${i}" index="${i}">${i}</div>
                </div>`
              }
            };
            return paginationHtml
          }
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        hashNavigation: {
          watchState: true,
        },

      },
    }
  },
  computed: {
    swiper () {
      return this.$refs.mySwiper.$swiper
    }
  },
  methods: {
    fy (e) {
      var index = e.target.getAttribute('index');
      this.swiper.slideTo(index, 1000, false);
    }
  }
}

5.修改样式需要deep深度监听分页器的样式名

亲测可用