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
});
}
})