swiper 自定義分頁器的使用

網上關於swiper 自定義分頁器的方法比較多，但是已經不適合使用。它的API又比較坑爹，什么都是點到為止，不說清楚。因為要做一個產品顏色切換的效果，有黑與白兩種顏色，因此嘗試使用Swiper的自定義分頁定義產品的顏色，看下圖：

 

swiper 默認的切換是不以這種產品的顏色來定的，因此，要先寫好顏色的分頁器：

<div class="swiper-pagination ubolt-swiper-pagination">
    <span class="swiper-pagination-bullet ubolt-black"></span>
    <span class="swiper-pagination-bullet ubolt-white"></span>
</div>

　　　　　　　　　　　　　　　　.swiper-pagination-bullet{
                                width: 40px;
                                height: 40px;
                                border-radius: 50%;
                                display: inline-block;
                                opacity: .5;
                                cursor: pointer;
                                border: 2px solid #979797;
                                transition: all .05s ease-in;
                            }
                            .ubolt-black{
                                background: #0E0E0E;
                            }
                            .ubolt-white{
                                background: #D8D8D8;
                            }

在Swiper的方法中作如下定義，自定義分頁器使用了 renderBullet 方法，通過判斷 index 來定義產品的顏色，方法中的參數 className 我也沒用到，直接 return 了兩個顏色的節點：

<script>
        $(document).ready(function () {
            var mySwiper = new Swiper ('.swiper-container', {
                direction: 'horizontal',
                height: 600,
                width: 600,
                loop: true,
                speed:1000,
                autoplay : {
                   delay:3000
                },
                effect : 'fade',
                roundLengths : true, 
                slidesPerView: 4,
                  spaceBetween: 40,
                  breakpoints: { 
                    //當寬度小於等於320
                    320: {
                      slidesPerView: 1,
                      spaceBetween: 10
                    },
                   //當寬度小於等於480
                    480: { 
                      slidesPerView: 2,
                      spaceBetween: 20
                    },
                    //當寬度小於等於640
                    640: {
                      slidesPerView: 3,
                      spaceBetween: 30
                    }
                  },
                // 如果需要分頁器
                pagination: {
                  el: '.swiper-pagination',
                  clickable :true,
                  //自定義分頁類型
                  type : 'custom',
                  //自定義分頁
                  renderBullet: function (index, className) {
                        if(index === 1){
                            return '<span class="swiper-pagination-bullet ubolt-black"></span>';
                        }else{
                            return '<span class="swiper-pagination-bullet ubolt-white"></span>';
                        }
                      
                    }
                }
            })        
        })
    </script>