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>

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