Swiper（三）：自定義點選事件swiper跳到指定頁面
阿新 • • 發佈：2019-01-09
選擇哪個按鈕就會跳到指定的頁面，這樣我們就可以自己來定義swiper分頁器的功能了。
下面的例子可以應用在點選地圖上的使用者頭像，則滾動到到對應使用者的資訊輪播圖
swiper的slideTo方法，swiper.slideTo(index,speed,runCallbacks);
index：必填，需要跳到頁面的索引
speed：選填，切換速度（毫秒）
runCallbacks：選填，boolean，為false時不觸發onSlideChange回撥函式。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Swiper demo</title> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"> <!-- Link Swiper's CSS --> <link rel="stylesheet" href="css/swiper.min.css"> <style> body{padding:20px 10%;} .mid{width:100%;height:120px;background: #fff;border-radius: 5px;float:left;text-align: center;line-height: 120px;} .swiper_box .swiper-pagination{height:0px;} .swiper_box .swiper-pagination-bullet{opacity:1;background: transparent;} .swiper_box .swiper-pagination-bullet-active{background: transparent;} .swiper_box .swiper-pagination-bullet-active .spanSame{border:3px solid #fff;} .swiper_box .spanSame{width:30px;height:30px;display:inline-block;border-radius: 50%;color:#666;text-align: center;line-height: 30px;} .swiper_box .span1{background: #7ebfde;margin-top:30px;} .swiper_box .span2{background: #aac2f7;float:right;margin-top:60px;} .swiper_box .span3{background: #f8b9e7;margin-top:90px;margin-left:45%;} .swiper_box .span4{background: #9cdcda;margin-top:150px;float:left;} .swiper_box .span5{background: #ece198;margin-top:140px;float:right;} </style> </head> <body style="background: #d6d6d6;"> <!-- Swiper --> <div class="swiper_box"> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"><div class="mid">Slide 1</div></div> <div class="swiper-slide"><div class="mid">Slide 2</div></div> <div class="swiper-slide"><div class="mid">Slide 3</div></div> <div class="swiper-slide"><div class="mid">Slide 4</div></div> <div class="swiper-slide"><div class="mid">Slide 5</div></div> </div> <!-- Add Pagination --> </div> <div class="swiper-pagination"></div> </div> <!-- Swiper JS --> <script src="js/swiper.min.js"></script> <script src="js/jquery.min.js"></script> <!-- Initialize Swiper --> <script> var swiper = new Swiper('.swiper-container', { pagination: '.swiper-pagination', slidesPerView: 'auto', centeredSlides: true, paginationClickable: true, paginationBulletRender: function (swiper, index, className) { return '<span class="spanSame span' + (index + 1) + '">' + (index + 1) + '</span>'; }, }); $(".swiper-pagination").on("click","span",function(){ var index = $(this).index(); swiper.slideTo(index); }) </script> </body> </html>