基于swiper插件制作响应式的企业案例图片列表展示,带左右按钮控制图片缩放滚动切换效果。适用于企业图文案例布局html代码。
方法调用
window.onload = function() {
var swiper = new Swiper('.swiper-container',{
autoplay: false, //是否自动滚动
speed: 500, //滚动速速
autoplayDisableOnInteraction: true,
loop: true,
centeredSlides: true,
slidesPerView: 3, //当前选中
pagination: '.swiper-pagination',
paginationClickable: true,
prevButton: '.swiper-button-prev', // 左右切换
nextButton: '.swiper-button-next', // 左右切换
onInit: function(swiper) {
swiper.slides[3].className = "swiper-slide swiper-slide-active"; //当前选中 状态
},
breakpoints: {
100: {
slidesPerView: 0,
}
}
});
}