轮播左右小化中间大

<style>

.swiper-container{
100%;margin:0 auto;position:relative;
background:#fff;
}
.swiper-slide span{
display:block;
90%;
margin:0 auto;
background:#fff;
border-radius:10px;
overflow:hidden;
}
</style>

<div class="swiper-container">
<div class="swiper-wrapper">
<%for(int i=0;i<5;i++){%>
<div class="swiper-slide">
<span>
<img src="/wx/images/banner.jpg" style="100%;display:block"/>
</span>
</div>
<%}%>
</div>
</div>
<script src="/js/swiper.min.js"></script>
<script>
// 轮播图
// 初始化swiper
var mySwiper2 = new Swiper('.swiper-container', {
autoplay:5000,//自动滑动
speed:500,//自动滑动开始到结束的时间(单位ms)
loop:true,//开启循环
loopedSlides:15,//在loop模式下使用slidesPerview:'auto',还需使用该参数设置所要用到的loop个数。
slidesPerView:'auto',//设置slider容器能够同时显示的slides数量(carousel模式)。另外,支持'auto'值,会根据容器container的宽度调整slides数目。
effect:'coverflow',//可以实现3D效果的轮播,
centeredSlides:true,//设定为true时,active slide会居中,而不是默认状态下的居左。
coverflow:{
rotate:0,//slide做3d旋转时Y轴的旋转角度。默认50。
stretch:15,//每个slide之间的拉伸值,越大slide靠得越紧。 默认0。
depth:100,//slide的位置深度。值越大z轴距离越远,看起来越小。 默认100。
modifier:1,//depth和rotate和stretch的倍率,相当于depth*modifier、rotate*modifier、stretch*modifier,值越大这三个参数的效果越明显。默认1。
slideShadows:false,//开启slide阴影。默认 true。
},
});
</script>

原文地址:https://www.cnblogs.com/hxlj130520/p/14155396.html