swiper4 自定义分页， 特殊布局

swiper4 自定义分页

在前端项目中 使用到swiper的场景有很多，像网站头部的banner切换，购物网站上商品的动态切换 ，swiper提供了特定的布局和样式库，，和一些切换的效果 ，和分页的基本样式。有时swiper提供的样式不能满足UI设计出来的效果，需要自己借助文档再修改。先来看下要实现的布局效果。先来看下swiper 的布局结构:

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
    <div class="swiper-pagination"></div>
</div>

结构中每个swiper-slide是一屏，宽度默认是100%, 可以自定义滑块的宽度，将swiper-slide样式重写 ，下图中，当前状态下图片大于左右两边，解决方式：每个滑块的大小不能变，图片的大小在改变，所以固定每个滑块的大小 260*300,

.swiper-slide {
  width: 260px;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}
默认图片大小为小图220px * 254px，
.swiper-slide img {
  width: 220px !important;
  height: 254px;
  border: 1px solid #eeeeee;
}
当前滑块图片大小 260px*300px
.swiper-slide-active img {
  width:  260px !important;
  height: 300px;
}

设置点击切换到对应的slide 通过设置slideToClickedSlide: true,
设定为centeredSlides:true时，active slide会居中
设置slidesPerView:3 容器能够同时显示的slides数量

let text = "";
var mySwiper = new Swiper('#swiper-container',{
	  loop: true,
      autoplay: true,
      slideToClickedSlide: true, //点击滑到相应的silde

      centeredSlides: true, //设定为true时，active slide会居中
      // effect: "coverflow", //切换效果动画
      slidesPerView: 3, //设置slider容器能够同时显示的slides数量
})

自定义分页器：clickable点击分页器滑到相应slide,renderBullet function(index,className)方法重写滑块布局

pagination: {
        el: ".swiper-pagination",
        clickable: true,
        renderBullet: function(index, className) {
          switch (index) {
            case 0:
              text = "http://cdn.cmread.com/coverFile/396922504/5527c1c8ade2eb92056a5f40a6d13d0586402c397b75/cover180240.jpg";
              break;
            case 1:
              text ="http://cdn.cmread.com/coverFile/350022278/5527c1c8a1e2dfbe056a5f40dc91e805861d8861463c/cover180240.jpg";
              break;
            case 2:
              text = "http://cdn.cmread.com/coverFile/378061498/5527c1c8a793e58805538b469c05a7058625a9de8621/cover180240.jpg";
              break;
            case 3:
              text = "http://cdn.cmread.com/coverFile/482736767/5527c1c8aa93c38405538b4cb914d005c453606db69c/cover180240.png";
              break;
            case 4:
              text ="http://cdn.cmread.com/coverFile/456356705/5527c1c8ade2dfbe056a5f40f53b3b0590c30bf45f00/cover180240.jpg";
              break;
            case 5:
              text ="http://cdn.cmread.com/coverFile/464567667/5527c1c8abe2ee56056a5f4078620c05a615c6d50968/cover180240.jpg";
              break;
          }
          return ('<span class="' + className + '">' + "<img src=" +text +"/></span>"
          );
        }
      }

分页器css

.swiper-pagination-bullet {
  margin-right: 30px;
  width: 2rem;
  height: 2rem;
  margin-top: 30px;
}
.swiper-pagination-bullet img {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  overflow: hidden;
}