bpHS 是一款基于 bootstrap 的炫酷 jQuery hero 幻灯片插件。该 bootstrap 幻灯片插件小巧实用,可以通过 data 属性来设置幻灯片的动画效果,还提供了许多参数用于控制幻灯片。
<div class="bp-hs">
<div class="bp-hs_inner">
<div class="bp-hs_inner__item">
<img src="..." alt="..."/>
</div>
</div>
</div>
该幻灯片插件需要在最外层的
$('.bp-hs').bpHS();
默认的 bp-hs_inner__item 动画效果是不可见的,你可以通过 data-*属性来控制幻灯片每一个 item 的动画。
Data 属性 | 描述 |
---|---|
data-transform="scale" |
Is used to scale elements. Add an addtional effect by using data-origin="top-(right | left)" or data-origin="bottom-(right | left)" |
data-transform="rotate" |
Is used to rotate elements from corners based on data-origin="top-(right | left)" or data-origin="bottom-(right | left)" (required*) |
下面是该幻灯片插件可用的参数:
参数名称 | 参数类型 | 默认值 | 描述 |
---|---|---|---|
activate |
Number | 0 | 触发在bp-hs_inner__item 的事件和添加 code>is-active class 使元素可见。 |
touchSwipe |
Boolean | true | 允许你在桌面设备上实用鼠标和在手机上使用滑动手势拖动幻灯片。这个选项需要TouchSwipe Jquery Plugin的支持。 |
nextText |
String | null | 在 next 控制按钮上显示的文字 |
prevText |
String | null | 在 previous 控制按钮上显示的文字 |
showControls |
Boolean | true | 显示或隐藏所有的控制按钮(next, prev and bullets) |
showButtons |
Boolean | true | 显示或隐藏 mext 和 prev 按钮 |
showBullets |
Boolean | true | 显示或隐藏 bullets |
arrowKeys |
Boolean | false |
允许使用键盘来到后幻灯片
|
autoPlay |
Boolean | false | 自动播放幻灯片(paused on hover)。 |
duration |
Number | 5000 | 幻灯片自动播放的时间间隔。 |
更多关于该幻灯片插件的信息请参看:https://github.com/boompx/bpHS
演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务,详询在线客服!