jQuery基于swiper插件制作黑色科技感的产品发布文字列表时间轴滚动效果,水平的带日期文字列表时间轴布局,支持左右箭头按钮控制列表滚动效果代码。这是一款支持响应式的公司大事记,产品发布,修改记录等文字列表时间轴html代码。

方法调用

$(function() {
	var mySwiper = new Swiper(".swiper-container", {
		slidesPerView: 4, //默认是显示4个
		initialSlide: 999, //默认从第几个显示,999是为了让右边没有
		spaceBetween: 0, //间距
		speed: 1000,//速度
		prevButton: ".swiper-button-prev", //左右按钮
		nextButton: ".swiper-button-next"
	})
	
	// 响应式适配浏览器窗口宽度变换个数显示
	var w = $(window).width();
	if (w < 700) {
	  initSwiper(2);
	} else {
	  initSwiper(4);
	}
	window.onresize = function(){
	  var w = $(window).width();
	  if (w < 700) {
		initSwiper(2);
	  } else {
		initSwiper(4);
	  }
	}
	function initSwiper(item) {
	  swiper = new Swiper(".swiper-container", {
		slidesPerView: item,
		spaceBetween: 0
	  });
	}
	
})