bpHS是一款基于bootstrap的炫酷jQuery hero幻灯片插件。该幻灯片插件小巧实用，可以通过data-属性来设置幻灯片的动画效果，还提供了许多参数用于控制幻灯片。

使用方法

HTML结构
<div class="bp-hs">
  <div class="bp-hs_inner">
    <div class="bp-hs_inner__item">
      <img src="..." alt="..."/>
    </div>
  </div>
</div>
调用插件

该幻灯片插件需要在最外层的<div>上设置一个id来用于js控制。

$('.bp-hs').bpHS();

DATA属性

默认的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