一、解决swiper滑动迟钝现象
对应代码:
observer: true,//修改swiper自己或子元素时,自动初始化swiper
observeParents: true,//修改swiper的父元素时,自动初始化swiper
二、实现swiper-slide-active居中
对应代码:
centeredSlides : true, // 设定为true时,active slide会居中,而不是默认状态下的居左。
slidesPerView :1.5, // 设置slider容器能够同时显示的slides数量(carousel模式)。
spaceBetween : 20, // 在slide之间设置距离(单位px)。
autoplay: 1500, // 1.5s后自动播放下一个slide
相关属性分析:
结果:
三、轮播到某slide时,修改该slide展示的样式
【要实现此功能,就修改swiper-slide-active
对应标签的样式即可】
举例:
结果:
未修改时:
修改后: