<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">&lt;div class="bp-hs"&gt;
  &lt;div class="bp-hs_inner"&gt;
    &lt;div class="bp-hs_inner__item"&gt;
      &lt;img src="..." alt="..."/&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</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>
@import "compass/css3";

View Compiled
Run Pen

External CSS

  1. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css
  2. https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css
  3. https://fonts.googleapis.com/css?family=Playfair+Display:400,700,400italic
  4. https://fonts.googleapis.com/css?family=Roboto
  5. https://db.tt/WZFWzG14
  6. https://db.tt/NgJ5MBVw

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. https://db.tt/W8H2jKJr
  3. https://db.tt/p1KQpAGT
  4. https://db.tt/a5sxJibr