基于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,
			}
		}
	});
}