hslider.js是一款简单实用的响应式全屏宽度jQuery幻灯片插件。hslider.js可以根据屏幕的大小自动调整幻灯片的宽度,幻灯片宽度始终占据整个视口的宽度。它使用简单,并且效果非常好。
使用方法
使用hslider.js幻灯片插件需要在页面中引入jquery、jquery.hslider.js和图片预加载文件imagesloaded.pkgd.min.js,以及CSS样式文件style.css。
<link rel="stylesheet" href="css/style.css"> <script type="text/javascript" src="js/jquery.min.js"></script> <script src='js/jquery.hslider.js'></script> <script src=js/imagesloaded.pkgd.min.js'></script>
HTML结构
hslider.js幻灯片可以使用<figure>
元素来作为幻灯片,或者使用无序列表作为幻灯片。
<div class="hsldr-container"> <figure> <img src="images/1.jpg" /> <figcaption>......</figcaption> </figure> <figure> <img src="images/2.jpg" /> <figcaption>......</figcaption> </figure> ...... </div> <!-- 或者 --> <div class="hsldr-container"> <ul> <li> <img src="images/1.jpg" /> <div class="caption">......</div> </li> <li> <img src="images/2.jpg" /> <div class="caption">......</div> </li> ...... </ul> </div>
初始化插件
在页面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