swiper分页器自定义

 

实现：

<template>
          <div class="center-top-swiper"
               @mouseenter="on_bot_enter"
               @mouseleave="on_bot_leave">
            <swiper :options="swiperOption"
                    ref="mySwiper">
              <swiper-slide v-for="i in 4"
                            :key="i">
                <!-- {{ i }} -->
                <img :src="require('@/assets/images/echarts/dataBoard016/swiper' + (i) + '.jpg')">
              </swiper-slide>
              <!-- 左右箭头 -->
              <div class="swiper-button-prev swiper-button-white"
                   slot="button-prev"></div>
              <div class="swiper-button-next swiper-button-white"
                   slot="button-next"></div>
              <!-- 标记页数 -->
              <div class="swiper-pagination"
                   slot="pagination"></div>
            </swiper>
          </div>
</template>
<script>
export default {
  components: {
  },
  data () {
    return {
      swiperOption: {
        // loop: false, // 因为swiper的loop模式：会在原本slide前后复制若干个slide(默认一个)并在合适的时候切换，让Swiper看起来是循环的。所以复制出来的slide导致原本设置的echarts的id不在是唯一的，echarts绘制的图也就显示不出来了。
        // autoplay: false, // 完全关闭自动轮播
        // 循环播放
        loop: true,
        // 循环方向
        direction: "horizontal",
        // 设置slider容器能够同时显示的slides数量(carousel模式)
        slidesPerView: 1,
        // slidesPerView: "auto",
        // 设定为true时，active slide会居中，而不是默认状态下的居左(false)
        centeredSlides: true,
        // 滑动速度
        speed: 2000,
        // 在slide之间设置距离（单位px）
        spaceBetween: 10,
        // 设定初始化时slide的索引，Swiper默认初始化时显示第一个slide
        initialSlide: 0,
        grabCursor: true, // 设置为true 时，鼠标覆盖Swiper 时指针会变成手掌形状，拖动时指针会变成抓手形状。
        // 自动播放
        autoplay: {
          // 隔×秒自动滑动一次
          delay: 5000,
          stopOnLastSlide: false,
          // 设置为false，用户操作swiper之后自动切换不会停止，每次都会重新启动autoplay。默认为true
          disableOnInteraction: false
        },
        // loopedSlides: 1,// 指定要循环（重复）的幻灯片数量
        // 左右箭头
        navigation: {
          prevEl: ".swiper-button-prev",
          nextEl: ".swiper-button-next",
        },
        // 标记页数
        pagination: {
          el: ".swiper-pagination",
          renderBullet: function (index, className) {
            // console.log(className, index + 1)
            // return '<span class="' + className + '"><image src="upload/swiper' + (index + 1) + '.jpg"></span>'
            return `<span class="${className}"><image src="${require('@/assets/images/echarts/dataBoard016/swiper' + (index + 1) + '.jpg')}"></span>`
          },
          bulletClass: 'my-bullet',//需设置.my-bullet样式 // pagination分页器内元素的类名。
          bulletActiveClass: 'my-bullet-active',// 定义pagination 分页器内当前活动块的指示小点的类名。
          clickable: true, // 设置为true时，点击分页器的指示点分页器会控制Swiper切换
        },
      },
    }
  },
  mounted () {
  },
  watch: {
  },
  computed: {
  },
  methods: {
    on_bot_enter () {
      //  swiper@4.5.1 vue-awesome-swiper@3.1.3
      // this.$refs.mySwiper.swiper.autoplay.stop()

      // swiper@5.2.0 vue-awesome-swiper@4.1.1
      this.$refs.mySwiper.$swiper.autoplay.stop()
      this.$refs.mySwiper.$swiper.navigation.$nextEl.removeClass('hide')
      this.$refs.mySwiper.$swiper.navigation.$prevEl.removeClass('hide')
    },
    on_bot_leave () {
      //  swiper@4.5.1 vue-awesome-swiper@3.1.3
      // this.$refs.mySwiper.swiper.autoplay.start()

      // swiper@5.2.0 vue-awesome-swiper@4.1.1
      this.$refs.mySwiper.$swiper.autoplay.start()
      this.$refs.mySwiper.$swiper.navigation.$nextEl.addClass('hide')
      this.$refs.mySwiper.$swiper.navigation.$prevEl.addClass('hide')
    },
  },
  beforeDestroy () {
  }
}
</script>
<style lang="less" scoped>
        .center-top-swiper {
          width: 800px;
          height: 524px;
          overflow: auto;
          position: relative;

          .swiper-container {
            width: 100%;
            height: 100%;
            position: absolute;
            // --swiper-theme-color: #ff6600;
            // /* 设置Swiper风格 */
            // --swiper-navigation-color: #00ff33;
            // // /* 单独设置按钮颜色 */
            --swiper-navigation-size: 24px;
            /* 设置按钮大小 */

            .swiper-slide {
              // height: 80%;
              // background-color: #bcc;
              // height: 300px;

              img {
                height: 416px;
                vertical-align: top;
              }
            }
          }
        }
</style>
<style lang="less">
/* 鼠标移入显示左右前进后退按钮 */
.swiper-container .hide {
  opacity: 0;
}

/* 按钮显示的动画 */
.swiper-button-next,
.swiper-button-prev {
  transition: opacity 0.5s;
}

// 指示器-分页器为图片
.swiper-container-horizontal {

  .swiper-pagination-bullets {
    // height: 100px;
    width: 100%;
    height: auto;
    background: none;
    bottom: 0;
    display: flex;

    .my-bullet {
      height: auto;
      background: none;
      width: 100%;
      // height: 100px;
      background-color: #eee;

      // 未选择的图片分页器 图片透明
      >img {
        width: 100%;
        height: 100px;
        vertical-align: middle;
        display: inline-block;
        //  opacity 属性用于调整元素的透明度。它允许您控制图像的透明度或不透明度。s 透明度值可以在 0.0（完全透明）到 1.0（完全不透明）之间。
        opacity: 0.5;
      }
    }

    .my-bullet-active {

      // 选中的图片不需要 图片透明
      >img {
        opacity: 1;
      }
    }
  }

}
</style>

 参考swiper对应的API：

renderBullet(index, className)_Swiper参数选项