Swiper3.x 自定义指示器-pagination

最新推荐文章于 2024-05-21 14:15:14 发布

悠悠~飘

最新推荐文章于 2024-05-21 14:15:14 发布

阅读量1.7k

点赞数

分类专栏： swiper js实战篇文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/weixin_48813932/article/details/126939403

版权

js实战篇同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

swiper

1 篇文章 0 订阅

订阅专栏

一.前言

很久没有更新博客了，最近一直在写静态页面，这就总是避不开swiper轮播

怎么自定义一个指示器样式呢？如何自定义指示器的绑定点击事件呢？

二.内容与解决方案

js部分：其中绑定事件是基于jquery写的

var mySwiper3 = new Swiper(".work_swiper", {
    autoplay: {
      stopOnLastSlide: true,
     delay: 3000,
     },
  speed: 1000,
  loop: true,
  pagination: {
    el: ".dot",
    // 自定义分页器，必须的type类型
    type: "custom",
    renderCustom: function (swiper, current, total) {
      var paginationHtml = "";
      for (var i = 1; i <= total; i++) {
        // 判断是不是激活焦点，是的话添加active类，不是就只添加基本样式类
        if (i === current) {
          paginationHtml += `<div class="dot-customs dot-customs-active">0${i}</div>`;
        } else {
          paginationHtml += `<div class="dot-customs">0${i}</div>`;
        }
      }
      return paginationHtml;
    },
  },
  slidesPerView: 1,
});
//给每个页码绑定跳转的事件
$(".dot").on("click", "div", function () {
  var index = $(this).get(0).innerHTML.slice(1);
  mySwiper3.slideTo(index, 1000, false); //切换到第一个slide，速度为1秒
});

以上是主要的swiper的js部分

html静态页面如下

    <div class="swiper-container work_swiper">
    
                <div class="swiper-wrapper">
                    <div class="swiper-slide ">
                        <article class="work_introduce">
                           内容1
                           
                        </article>
                    </div>
                    <div class="swiper-slide ">
                        <article class="work_introduce">
                             内容2
                        </article>
                    </div>
                    <div class="swiper-slide ">
                        <article class="work_introduce">
                          内容三
                        </article>
                    </div>
                </div>
                <!-- 分页器 -->
                <div class="dot">
                </div>
</div>

css自定义一个分页器样式

.dot {
            display: flex;
        }
.dot .dot-customs {
  width: 32px;
  height: 32px;
  border-radius: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f0f0f0;
  color: #fff;
  margin-right: 14px;
}
.dot .dot-customs-active {
  background-color: #4558ad;
}