swiper自定义分页器的样式

<!-- 轮播图 -->
    <div>
      <div>
        <div>
          <h1>1</h1>
        </div>
        <div>
          <h1>2</h1>
        </div>
        <div>
          <h1>3</h1>
        </div>
        <div>
          <h1>4</h1>
        </div>
      </div>
    </div>

</div>

<script>
    var mySwiper = new Swiper('.swiper-container',

{
        // 循环模式
        loop: true,
       
        pagination: {
          // 自定义分页器的类名----必填项
          el: '.custom-pagination',

// 是否可点击----必填项
          clickable: true,

// 分页的类型是自定义的----必填项
          type: 'custom',

// 自定义特殊类型分页器，当分页器类型设置为自定义时可用。
          renderCustom: function (swiper, current, total) {
            //  console.log(current);//1 2 3 4

// 1、分页器激活样式的改变---给自己添加激活样式并将兄弟的激活样式移出。
            $('.custom-pagination').children().eq(current - 1).addClass('active').siblings().removeClass('active');

// 2、分页器点击的时候同时切换轮播图(事件委托)----循环模式slideToLoop--
            $('.custom-pagination').on('click', 'li', function () {
              mySwiper.slideToLoop($(this).index(), 1000, false)
            })
          }
        },
      })
  </script>
</body>
</html>

（编辑：焦作站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!