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

<div class="swiper-container">

            <div class="swiper-wrapper">

                <div class="swiper-slide"><img src="/images/banner1.jpg" /></div>

                <div class="swiper-slide"><img src="/images/banner2.jpg" /></div>

                <div class="swiper-slide"><img src="/images/5.png" /></div>

                <div class="swiper-slide"><img src="/images/banner2.jpg" /></div>

            </div>

            <!-- 如果需要分页器 -->

            <div class="swiper-pagination"></div>

 </div>

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的东西。。。