Mobile-first jQuery Slideshow For HammerJS - hammerousel

hammerousel is a simple jQuery plugin used to create a content slideshow which allows you to slide through a series of background images by touch swipe or mouse drag. Performs perfect on touch devices such as iPhone, iPad, Android, etc.

Dependencies:

• jQuery and jQuery UI 1.11+
• Hammer.js - Add touch gestures to your page.
• jQuery hammer.js - jQuery plugin for hammer.js
• modernizr.js

How to use it:

1. Include jQuery and other required resources in your document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/hammer.js/1.1.3/hammer.min.js"></script>
<script src="js/jquery.hammer.js"></script>
<script src="js/modernizr.js"></script>

2. Include the jQuery hammerousel plugin's script and CSS after jQuery library.

<link rel="stylesheet" href="css/jquery.hammerousel.css">
<script src="js/jquery.hammerousel.js"></script>

3. Create a slideshow with Html unordered lists.

<div class="hammerousel">
  <ul>
    <li class="pane-1">
      <div>
        <h2>Content Section #1</h2>
      </div>
      <div>
        <h2>Content Section #2</h2>
      </div>
      <div>
        <h2>Content Section #3</h2>
      </div>
      <div>
        <h2>Content Section #4</h2>
      </div>
    </li>
    <li class="pane-2">
      <div>
        <h2>Content Section #1</h2>
      </div>
      <div>
        <h2>Content Section #2</h2>
      </div>
      <div>
        <h2>Content Section #3</h2>
      </div>
    </li>
    <li class="pane-3">
      <div>
        <h2>Content Section #1</h2>
      </div>
    </li>
    <li class="pane-4">
      <div>
        <h2>Content Section #1</h2>
      </div>
    </li>
  </ul>
</div>

4. Add background images to these panels in CSS.

.hammerousel li.pane-1 div {
  background-image: url('1.png');
}

.hammerousel li.pane-2 div {
  background-image: url('2.png');
}

.hammerousel li.pane-3 div {
  background-image: url('3.png');
}

.hammerousel li.pane-4 div {
  background-image: url('4.png');
}

5. Initialize the plugin with one JS call.

$('.hammerousel').hammerousel();

Change log:

2014-10-03

• updated to v2.0.1

2014-10-02

• upgraded to be compatible with HammerJS v2.0.4

2014-10-01

• fixed bugs.

2014-09-29

• v1.3

2014-09-27

• Changed vertical scroll to scrollTop bind instead of transform and offset-y to attempt to making vertical pan scroll smoother

2014-09-25

• Fixed an issue with vertical scrolling where there is no overflow

2014-09-24

• improvement.

---

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