swiper自定义分页器

效果图：

 1、template 内容

<div class="zsmk">
      <swiper style="height: 100%" :options="gSwiper2" ref="jSwiper">
        <swiper-slide v-for="(item, index) in 2" :key="index">
          <div class="z_swiper">
            <div class="z_left">
              <img src="./img/t1.png" />
            </div>
            <div class="z_right">
              <div class="z_top"></div>
              <div class="z_bottom">
                <div class="z_b_time">
                  <span>活动时间：2023-3-23 11:40:24</span>
                </div>
                <div class="z_b_data">
                  <span
                    >活动内容参观来访活动性质对外与政府交流地点一楼办事厅</span
                  >
                </div>
              </div>
            </div>
          </div>
        </swiper-slide>
      </swiper>
      <div class="swiper-pagination"></div>
    </div>

2、data:{}中存放内容

gSwiper2: {
        //事件明细列表轮播
        autoplay: {
          delay: 5000,
          stopOnLastSlide: false,
          disableOnInteraction: false, //触摸后仍然执行
        },
        direction: "horizontal",
        observer: true,
        observeParents: true,
        loop: true,
        speed: 2000,
        freeMode: true,
        pagination: {
          el: ".swiper-pagination",
        },
      },

3、自定义样式：

<style>
.swiper-pagination {
  left: 180px;
  bottom: 4px;
}
.swiper-pagination-bullet {
  width: 5px;
  height: 5px;
  opacity: 0.5;
  background: #d8d8d8;
  margin-bottom: -0.5;
}
.swiper-pagination-bullet-active {
  width: 16.04px;
  height: 5px;
  border-radius: 40px;
  opacity: 1;
  background: #00dbff;
  margin-right: 4px;
  margin-left: 4px;
  margin-bottom: 0px !important;
}
</style>