swiper写中间⼤两边⼩的轮播图
注：我是在vue项⽬中使⽤vue-awesome-swiper插件实现的 和swiper⼀样没有任何区别
html:
<swiper :options="swiperOption">
<swiper-slide></swiper-slide>
<swiper-slide></swiper-slide>
<swiper-slide></swiper-slide>
</swiper>
js:
js中就是swiper的配置项
swiperOption:{
slidesPerView:'auto',
centeredSlides:true,
autoplay:{
delay:3000,
stopOnLastSlide:false,
disableOnInteraction:false
},
pagination:{
el:'.swiper-pagination',
type:'fraction'
},
loop:true,
observer:true,//修改swiper⾃⼰或⼦元素时，⾃动初始化swiper
observeParents:true,//修改swiper的⽗元素时，⾃动初始化swiper
},js实现轮播图最简代码
其中 slidesPerView 和 centeredSlides 为主要配置项
slidesPerView控制显⽰slide的数量 可以设置成 整数 ⼩数 字符串auto(设置成⼩数的时候循环轮播会出现问题) centeredSlides控制slide居中显⽰
\\\
css :
.index .swiper-container{
width:100%;
height:100%;
}
.index .swiper-container img{
width:100%;
height:100%;
}
.index .swiper-slide {
width:80%;
text-align: center;
font-size:18px;
background: #fff;
/* Center slide text vertically */
display:-webkit-box;
display:-ms-flexbox;
display:-webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
transition:300ms;
transform:scale(0.9);
}
.index .swiper-slide-active,.swiper-slide-duplicate-active{
transform:scale(1);
}
把swiper-slide的宽设置成80% 在⼀个slide中就可以显⽰多个利⽤active类名和css3中的缩放实现中间⼤两边⼩的效果
完成以上代码就能实现途中这种样式的左右轮播效果了

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。