<a href="https://github.com/boompx/bpHS" class="fork-btn">
<img src="https://db.tt/4c1oeSYa" alt="https://github.com/boompx/bpHS">
</a>
<div class="jumbotron text-center bg-transparent">
<div class="container">
<h1 class="font-heading">jQuery Hero Slider Plugin</h1>
</div>
</div>
<div class="container">
<div class="bp-hs" id="demo-default">
<div class="bp-hs_inner">
<div class="bp-hs_inner__item" data-transform="scale">
<img src="https://db.tt/VW6C9Afy" alt="Boompx Hero Slider 01"/>
</div>
<div class="bp-hs_inner__item" data-transform="rotate" data-origin="top-left">
<img src="https://db.tt/27eMRBnR" alt="Boompx Hero Slider 02"/>
</div>
<div class="bp-hs_inner__item" data-transform="rotate" data-origin="bottom-left">
<img src="https://db.tt/eETaTbfd" alt="Boompx Hero Slider 03"/>
</div>
<div class="bp-hs_inner__item">
<img src="https://db.tt/yUZ9ydGG" alt="Boompx Hero Slider 04"/>
</div>
</div>
</div>
<ul class="list-inline clearfix m-t30">
<li class="pull-left">
<a class="twitter-follow-button"
href="https://twitter.com/boom_px"
data-show-count="true"
data-lang="en">
Follow @twitterapi
</a>
<script>window.twttr=(function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return;js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);t._e=[];t.ready=function(f){t._e.push(f);};return t;}(document,"script","twitter-wjs"));</script>
</li>
<li class="pull-left">
<a class="github-button" href="https://github.com/boompx" data-count-href="/boompx/followers" data-count-api="/users/boompx#followers">Follow @boompx</a>
</li>
<li class="pull-left">
<a class="github-button" href="https://github.com/boompx/bpHS" data-icon="octicon-star" data-count-href="/boompx/bpHS/stargazers" data-count-api="/repos/boompx/bpHS#stargazers_count">Star</a>
</li>
<li class="pull-left">
<a class="github-button" href="https://github.com/boompx/bpHS" data-icon="octicon-git-branch" data-count-href="/boompx/bpHS/network" data-count-api="/repos/boompx/bpHS#forks_count">Fork</a>
</li>
<li class="pull-left">
<a class="github-button" href="https://github.com/boompx/bpHS/archive/master.zip" data-icon="octicon-cloud-download">Download</a>
</li>
<li class="pull-left">
<a class="github-button" href="https://github.com/boompx/bpHS/issues" data-icon="octicon-issue-opened" data-count-api="/repos/boompx/bpHS#open_issues_count">Issue</a>
</li>
<li class="pull-left">
<div class="fb-like" data-href="https://www.facebook.com/pages/Boompx/380876822068214?ref=aymt_homepage_panel" data-layout="standard" data-action="like" data-show-faces="true" data-share="false"></div>
</li>
</ul>
<hr />
<h2 class="font-heading">Getting Started</h2>
<pre class="prettyprint prettyprint-std">git clone https://github.com/boompx/bpHS.git</pre>
<h2 class="font-heading">Markup</h2>
<pre class="prettyprint prettyprint-std"><div class="bp-hs">
<div class="bp-hs_inner">
<div class="bp-hs_inner__item">
<img src="..." alt="..."/>
</div>
</div>
</div></pre>
<h2 class="font-heading">Usage</h2>
<p class="text-muted">
<strong>bpHS</strong> require the use of an <code>id</code> on the outermost container (<code>.bp-hs</code>) for slider controls to function properly.
</p>
<p>Fire <strong>bpHS</strong></p>
<pre class="prettyprint prettyprint-std">$('.bp-hs').bpHS();</pre>
<h2 class="font-heading">Options</h2>
<p>The default effect/transition for <code>bp-hs_inner__item</code> is opacity. You can control the animation for each item via data attributes <code>data-*</code>.</p>
<table class="table table-bordered table-striped">
<tr>
<th>Data attribute</th>
<th>Description</th>
</tr>
<tr>
<td><code>data-transform="scale"</code></td>
<td>Is used to scale elements. <span class="text-muted">Add an addtional effect by using <code>data-origin="top-(right | left)"</code> or <code>data-origin="bottom-(right | left)"</code></span></td>
</tr>
<tr>
<td><code>data-transform="rotate"</code></td>
<td>Is used to rotate elements from corners based on <code>data-origin="top-(right | left)"</code> or <code>data-origin="bottom-(right | left)"</code> <small class="text-danger">(required*)</small></td>
</tr>
</table>
<h2 class="font-heading">Methods</h2>
<p class="text-muted">Initializes the <strong>bpHS</strong> with an optional options</p>
<table class="table table-bordered table-striped">
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
<tr>
<td><code>activate</code></td>
<td class="text-muted">Number</td>
<td class="text-muted">0</td>
<td>
This event fires on <code>bp-hs_inner__item</code> and add <code>is-active</code> class to make visible/default.
</td>
</tr>
<tr>
<td><code>touchSwipe</code></td>
<td class="text-muted">Boolean</td>
<td class="text-muted">true</td>
<td>
Allows you to drag slider items (right | left) on desktop and swipe on handheld devices.
This option required <a href="https://github.com/mattbryson/TouchSwipe-Jquery-Plugin">TouchSwipe Jquery Plugin</a>
</td>
</tr>
<tr>
<td><code>nextText</code></td>
<td class="text-muted">String</td>
<td class="text-muted">null</td>
<td>
The text to display for the next control button
</td>
</tr>
<tr>
<td><code>prevText</code></td>
<td class="text-muted">String</td>
<td class="text-muted">null</td>
<td>
The text to display for the previous control button
</td>
</tr>
<tr>
<td><code>showControls</code></td>
<td class="text-muted">Boolean</td>
<td class="text-muted">true</td>
<td>
Show or hide all controls (next, prev and bullets)
</td>
</tr>
<tr>
<td><code>showButtons</code></td>
<td class="text-muted">Boolean</td>
<td class="text-muted">true</td>
<td>
Show or hide next, prev only
</td>
</tr>
<tr>
<td><code>showBullets</code></td>
<td class="text-muted">Boolean</td>
<td class="text-muted">true</td>
<td>
Show or hide bullets only
</td>
</tr>
<tr>
<td><code>arrowKeys</code></td>
<td class="text-muted">Boolean</td>
<td class="text-muted">false</td>
<td>
Allows to navigate slider items on keypress arrow
<div class="btn-group" role="group">
<button type="button" class="btn btn-xs btn-default" disabled><i class="fa fa-long-arrow-left"></i></button>
<button type="button" class="btn btn-xs btn-default" disabled><i class="fa fa-long-arrow-right"></i></button>
</div>
</td>
</tr>
<tr>
<td><code>autoPlay</code></td>
<td class="text-muted">Boolean</td>
<td class="text-muted">false</td>
<td>
Automatically cycling an item <small class="text-muted">(paused on hover)</small>. If false, slider will not automatically cycle.
</td>
</tr>
<tr>
<td><code>duration</code></td>
<td class="text-muted">Number</td>
<td class="text-muted">5000</td>
<td>
The amount of time to delay between automatically cycling an item.
</td>
</tr>
</table>
<div class="text-center">
<img class="img-responsive" src="https://db.tt/VkbWExvz" alt="https://github.com/boompx/bpHS"/>
<p class="text-muted">more options are coming soon...</p>
<hr />
Designed and built with all the love by <a href="boompx.com">Boompx</a>
<br />
Code licensed under <a href="https://github.com/boompx/bpHS/blob/master/LICENSE">MIT</a>
~ Currently v0.1.0
</div>
</div>
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
<script async defer id="github-bjs" src="https://buttons.github.io/buttons.js"></script>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&appId=393230720806634&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
