原連結：http://t.zoukankan.com/toggle-p-7676473.html

swiper輪播問題之二：預設顯示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',
 })