Heim > Web-Frontend > js-Tutorial > Hauptteil

Detaillierte Erläuterung der Schritte zur Verwendung eines benutzerdefinierten Pagers in Swiper

php中世界最好的语言
Freigeben: 2018-04-13 13:48:00
Original
4070 Leute haben es durchsucht

Dieses Mal erkläre ich Ihnen ausführlich die Schritte zur Verwendung des benutzerdefinierten Paginators in Swiper. Was sind die Vorsichtsmaßnahmen bei der Verwendung des benutzerdefinierten Paginators in Swiper? . Lasst uns einmal einen Blick darauf werfen.

HTML-DEMO (offizielles Website-Beispiel)

<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>
Nach dem Login kopieren

1. Navigationsschaltflächen festlegen

Hinweis: Die Navigationsschaltflächen von Sweiper und einige andere DOM-Strukturen können außerhalb von „.swiper-container“ platziert werden.

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

Sie müssen nur die Klasse der Schaltfläche anpassen und alles ist in Ordnung.

<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>
Nach dem Login kopieren

2. Richten Sie einen benutzerdefinierten Paginator ein (siehe Konfiguration oben)

pagination: '.pagination' Geben Sie dem Paginator einen Container, CSS-Klassennamenauswahl

paginationType: 'custom ' Legen Sie die Paginierungsanpassung fest
paginationCustomRender:function(){} Legen Sie den Inhalt der benutzerdefinierten Paginierung fest
Binden Sie ein Ereignis für jede Seitenzahl, um zur entsprechenden Seitenzahl zu springen

Ich glaube, Sie haben es gelesen Dieser Artikel Sie beherrschen die Fallmethode. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Swiper implementiert die Bildrotation für mobile Werbung

So verwenden Sie den Vue Component Communication Bus

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Schritte zur Verwendung eines benutzerdefinierten Pagers in Swiper. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage