Touch-enabled jQuery Image Slider with Cool CSS3 Animations

Hero Slider is a brand-new jQuery slider plugin for creating a responsive, touch-enabled, customizable image carousel slider with cool transition effects based on CSS3 animations.

How to use it:

1. Load the jQuery Hero Slider plugin's stylesheet in the head section.

<link rel="stylesheet" href="dist/css/bpHS.min.css">

2. Load the Font Awesome for navigation icons (Optional).

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

3. The Html structure to create an image carousel slider. You can use data-* attribute to specify the transition effects individually for each slide.

<div class="bp-hs" id="demo">
  <div class="bp-hs_inner">
    <div class="bp-hs_inner__item" data-transform="scale">
      <img src="1.jpg" alt="Sample Image 01">
    </div>
    <div class="bp-hs_inner__item" data-transform="rotate" data-origin="top-left">
      <img src="2.jpg" alt="Sample Image 02">
    </div>
    <div class="bp-hs_inner__item" data-transform="rotate"  data-origin="bottom-left">
      <img src="3.jpg" alt="Sample Image 03">
    </div>
    <div class="bp-hs_inner__item">
      <img src="4.jpg" alt="Sample Image 04">
    </div>
  </div>
/div>

4. Include jQuery library and the jQuery Hero Slider plugin at the end of the document.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="dist/js/bpHS.min.js"></script>

5. Include the OPTIONAL jQuery touchSwipe plugin for touchSwipe option.

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.4/jquery.touchSwipe.min.js"></script> 

6. Initialize the image carousel slider.

$('#demo').bpHS({
  nextText : '<i class="fa fa-angle-right"></i>',
  prevText : '<i class="fa fa-angle-left"></i>'
});

7. Full plugin options.

$('#demo').bpHS({

// This event fires on bp-hs_inner__item and add is-active class to make visible/default.
activate: 0,

// Allows you to drag slider items (right | left) on desktop and swipe on handheld devices.
touchSwipe: true,

// The text to display for the next control button
nextText: null,

// The text to display for the previous control button
prevText: null,

// Show or hide all controls (next, prev and bullets)
showControls: true,

// Show or hide next, prev only
showButtons: true,

// Show or hide bullets only
showBullets: true,

// Allows to navigate slider items on keypress arrow
arrowKeys: false,

// Automatically cycling an item (paused on hover). 
autoPlay: false,

// The amount of time to delay between automatically cycling an item.
duration: 5000

});

---

This awesome jQuery plugin is developed by boompx. For more Advanced Usages, please check the demo page or visit the official website.