swiper 定义放多少张图片_swiper轮播问题之二：默认显示3张图片，中间显示全部两边显示部分...

其二：项目遇到比较有点要求的轮播图，默认显示3张图片，中间显示全部，两边显示部分。如图：

网上找了也没有找到合适的，最后经过自己摸索写了出来，贴出代码分享给大家。

CSS

.swiper-container{margin-top:20px;width:750px;height:320px;margin-bottom:53px;overflow:visible!important;

}.swiper-container .swiper-wrapper .swiper-slide{width:620px;border-radius:20px;}.swiper-container .swiper-wrapper .swiper-slide img{width:100%;height:320px;border-radius:20px;}.swiper-container .swiper-wrapper .swiper-slide-prev{margin-top:18px;height:284px!important;}.swiper-container .swiper-wrapper .swiper-slide-prev img{height:284px!important;}.swiper-container .swiper-wrapper .swiper-slide-next{margin-top:18px;height:284px!important;}.swiper-container .swiper-wrapper .swiper-slide-next img{height:284px!important;}.swiper-container .swiper-wrapper .swiper-slide-active{width:620px;}.swiper-pagination{bottom:-30px!important;

}.swiper-pagination .swiper-pagination-bullet{width:12px;height:12px;background:#ff1e1e;}.swiper-pagination .swiper-pagination-bullet-active{width:21px;height:12px;background:#e75230;border-radius:6px;}

DOM

js

var mySwiper = new Swiper ('.swiper-container', {

direction:'horizontal',

loop:true,

autoplay:5000,

slidesPerView:"auto",

centeredSlides:true,

spaceBetween:20,//如果需要分页器

pagination: '.swiper-pagination',

})

以上就是我使用swiper的一点经验，其实对于swiper来说还是很浅显的，swiper加上TweenMax能做出很多很好很强大的动画和功能！下次有时间我会给大家分享点TweenMax的东西。。。