Swiper插件分頁器怎么用

小編給大家分享一下Swiper插件分頁器怎么用，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

1. 引入swiper.min.css
   

2. 引入query.min.js 和swiper.min.js

3. 分頁器以及輪播的一般樣式引用

   <style type="text/css">
           .swiper-container {
               margin: 0 auto;
               position: relative;
               overflow: hidden;
               width:100%;     
           }
           .swiper-slide {
               position: relative;
               width:100%;
           }
           #article-slide p img {
               width: 100%;
               display: block;
           }
           #article-slide .swiper-aa {
               width: 100%;
               position: absolute;
               text-align: center;
               z-index: 210;
               bottom: 10px;
               left: 0;
              
           }
           .swiper-pagination-bullet-active{
               background: red;
           }
   
           #article-slide .swiper-pagination-bullet{
               margin:0 5px;
           }
       </style>

4. html樣式：

   <div class="swiper-container swiper-container-horizontal" id="article-slide">

    針對圖片
       <div class="swiper-wrapper">
           <div class="sec-activity swiper-slide swiper-slide-duplicate">
               <p>
                   <a href="http://m.welltrend.com.cn/special/meiguo-shuangtui-2017"><img
                       src="img/retreat_03.jpg"></a>
               </p>
           </div>
           <div class="sec-activity swiper-slide">
               <p><a href="/Responsive-56255.html"><img src="img/retreat_04.jpg"></a></p>
           </div>
           <div class="sec-activity swiper-slide swiper-slide-prev">
               <p><a href="/Responsive-56266.html"><img src="img/retreat_05.jpg"></a></p>
           </div>
           <div class="sec-activity swiper-slide swiper-slide-active">
               <p><a href="/Responsive-55642.html"><img src="img/retreat_06.jpg"></a></p>
           </div>
       </div>
   針對分頁器
       <div class="swiper-aa swiper-pagination-clickable">
               <span class="swiper-pagination-bullet"></span>
               <span class="swiper-pagination-bullet"></span>
               <span class="swiper-pagination-bullet swiper-pagination-bullet-active"></span>
               <span class="swiper-pagination-bullet"></span>
       </div>
   </div>

5. js部分

   var countrySwp = new Swiper('#article-slide', {
               pagination: '.swiper-aa',
               spaceBetween: 25,
               initialSlide: 0,
               slidesPerView: 'auto',
               centeredSlides: true,
               paginationClickable: true,
               paginationType:'bullets'
           })
   

以上是“Swiper插件分頁器怎么用”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！