脚本宝典收集整理的这篇文章主要介绍了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', })
以上是脚本宝典为你收集整理的swiper轮播问题之二：默认显示3张图片，中间显示全部两边显示部分全部内容，希望文章能够帮你解决swiper轮播问题之二：默认显示3张图片，中间显示全部两边显示部分所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。