Detailed explanation of the steps for using custom pager in Swiper

This time I will bring you a detailed explanation of the steps for using the custom paginator in Swiper. What are the precautions when using the custom paginator in Swiper? The following is a practical case, let’s take a look. one time.

HTML DEMO (official website example)

<link rel="stylesheet" href="path/to/swiper.min.css">
<p class="swiper-container">
 <p class="swiper-wrapper">
  <p class="swiper-slide">Slide 1</p>
  <p class="swiper-slide">Slide 2</p>
  <p class="swiper-slide">Slide 3</p>
 </p>
 <!-- 如果需要分页器 -->
 <p class="swiper-pagination"></p>
 <!-- 如果需要导航按钮 -->
 <p class="swiper-button-prev"></p>
 <p class="swiper-button-next"></p>
 <!-- 如果需要滚动条 -->
 <p class="swiper-scrollbar"></p>
</p>
<script src="path/to/jquery.js"></script>
<script src="path/to/swiper.jquery.min.js"></script>

1. Set navigation buttons

Note: Sweiper's navigation buttons and some other DOM structures can be placed outside ".swiper-container".

<input class="btn btn-gray button-prev" name="" type="button" value="上一题">
<input class="btn btn-gray button-next" name="" type="button" value="下一题">

Just need to match the class of the button and it will be OK.

<script>  
 var mySwiper = new Swiper ('.swiper-container', {
  // 如果需要前进后退按钮
  nextButton: '.button-next',//对应"下一题"按钮的class
  prevButton: '.button-prev',//对应"上一题"按钮的class
  pagination: '.pagination',//分页容器的css选择器
  paginationType : 'custom',//自定义-分页器样式类型（前提）
  //设置自定义分页器的内容
  paginationCustomRender: function (swiper, current, total) {
   var _html = '';
   for (var i = 1; i <= total; i++) {
    if (current == i) {
    _html += &#39;<li class="swiper-pagination-custom active">' + i + '</li>';
    }else{
    _html += '<li class="swiper-pagination-custom">' + i + '</li>';
    }
   }
   return _html;//返回所有的页码html
  }
 })
 //给每个页码绑定跳转的事件 
 $('.swiper-pagination').on('click','li',function(){
  var index = this.innerHTML;
  mySwiper.slideTo(index-1, 500, false);//切换到第一个slide，速度为1秒
 })
</script>

2. Set up a custom paginator (see configuration above)

pagination: '.pagination' Give the paginator a container, css class name selector

paginationType: ' custom' Set the pagination customization
paginationCustomRender:function(){} Set the content of the custom pagination
Bind each page number to an event that jumps to the corresponding page number

I believe you have read this article You have mastered the case method. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

Swiper implements mobile advertising image carousel

Vue component communication Bus usage method

The above is the detailed content of Detailed explanation of the steps for using custom pager in Swiper. For more information, please follow other related articles on the PHP Chinese website!