hslider.js是一款简单实用的响应式全屏宽度jQuery幻灯片插件。hslider.js可以根据屏幕的大小自动调整幻灯片的宽度,幻灯片宽度始终占据整个视口的宽度。它使用简单,并且效果非常好。
使用方法
使用hslider.js幻灯片插件需要在页面中引入jquery、jquery.hslider.js和图片预加载文件imagesloaded.pkgd.min.js,以及CSS样式文件style.css。
HTML结构
hslider.js幻灯片可以使用元素来作为幻灯片,或者使用无序列表作为幻灯片。
![]()
...... ...... ![]()
......
......- ......
......
初始化插件
在页面DOM元素加载完毕之后,可以通过hslider()方法来初始化该幻灯片插件。
$( ".hsldr-container" ).hslider();
配置参数
hslider.js幻灯片插件的可用配置参数有:
navBar:是否在底部显示导航栏。auto:是否自动播放。delay:动画过渡的延迟时间。
例如:
$( ".hsldr-container" ).hslider({
navBar: false,
auto: false,
delay: 4000
});
hslider.js幻灯片插件的github地址为:https://github.com/CodeInnTeam/hslider









