Simplest Mobile Image Slider Plugin with jQuery - SlideHammer

SlideHammer is an ultra-light jQuery plugin for creating a simple, responsive, mobile-friendly image slider that supports any touch gestures based on hammer.js.

How to use it:

1. To get started, make sure you have jQuery library and hammer.js installed in your web page.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to//hammer.min.js"></script>

2. Include the stylesheet slidehammer.min.css in the head section, and the JS file slidehammer.min.js after jQuery JavaScript library.

<link rel="stylesheet" href="dist/slidehammer.min.css">
<script src="dist/slidehammer.min.js"></script>

3. The required markup structure for the image slider.

<div class="slides">
  <div class="slide-wrapper">
    <div class="slide-container">
      <div class="slide">
        <img src="1.jpg">
      </div>
      <div class="slide">
        <img src="2.jpg">
      </div>
      <div class="slide">
        <img src="3.jpg">
      </div>
    </div>
  </div>
</div>

4. Initialize the plugin and done.

$('.slides').slidehammer();

5. Available plugin options.

thresholdPercentage: 0.33,
thresholdVelocity: 0.5,
wrapper: '.slide-wrapper',
container: '.slide-container',
slide: '.slide',
height: '66.66%',
enabled: true,
onInit: function() {},
onSlideChange: function() {},
onPan: function() {}

Change log:

2015-09-26

• Only configure Hammer instance once

2015-09-25

• Add ability to disable touch on slider

---

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