Explication détaillée des étapes d'utilisation du téléavertisseur personnalisé dans Swiper

Cette fois, je vais vous donner une explication détaillée des étapes d'utilisation du paginateur personnalisé dans Swiper. Quelles sont les précautions lors de l'utilisation du paginateur personnalisé dans Swiper. . Jetons un coup d'oeil une fois.

DÉMO HTML (exemple de site officiel)

<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. Définir les boutons de navigation

Remarque : les boutons de navigation de Sweiper et certaines autres structures DOM peuvent être placés en dehors de ".swiper-container".

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

Il suffit de faire correspondre la classe du bouton et tout ira bien.

<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. Configurer un paginateur personnalisé (voir configuration ci-dessus)

pagination : '.pagination' Donnez au paginateur un conteneur, un sélecteur de nom de classe CSS

paginationType : 'custom ' Définir la personnalisation de la pagination
paginationCustomRender:function(){} Définir le contenu de la pagination personnalisée
Lier un événement pour chaque numéro de page pour accéder au numéro de page correspondant

Je crois que vous avez lu cet article Vous maîtrisez la méthode des cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Swiper implémente la rotation des images publicitaires mobiles

Méthode d'utilisation du bus de communication des composants Vue

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!