swiper自定义分页器

swiper自定义分页

左边分页导航不动，右边图片轮播，内容随图片变化而变化

页面布局代码

            <div class="store_detail hd" style="width: 20%;">
                <ul class="storelist">
                 </ul>
            </div>
            <div class="bdbox" style="width: 80%;">
                <div class="bd swiper-container storeswiper-container" style="width: 100%;">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide"><img src="static/image/store.png" /></div>
                        <div class="swiper-slide"><img src="static/image/store.png" /></div>
                        <div class="swiper-slide"><img src="static/image/store.png" /></div>
                    </div>
                </div>
            </div>

js代码

var sy_Swiper = new Swiper('.storeswiper-container',{
  autoplay:true,
  loop:true,
  pagination:{
      el:'.storelist',
      clickable:true,
      renderBullet:function(index,className) {
        switch(index){
          case 0:text=arr[0];break;
          case 1:text=arr[1];break;
          case 2:text=arr[2];break;
        }
        console.log(text);
        // return '<li class="'+className+'">'+text+'</li>';
        return '<li class="'+className+'"> <a href="#" ><h2>'+text+'</h2><hr></a><div class="circle"></div></li>';

      },
      bulletClass:'clickable',
      bulletActiveClass:'on',
  }
}); 

css代码暂无