Mobile First Content Slider with jQuery and Hammer.js - ItemSlide.js

File Size: 73.5 KB
Views Total: 7160
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Mobile First Content Slider with jQuery and Hammer.js - ItemSlide.js

ItemSlide.js is a flexible, responsive carousel/slider jQuery plugin which allows to scroll/swipe through a set of elements using mouse drag or touch gestures based on hammer.js. Animated with requestAnimationFrame technique.

Basic Usage:

1. Include the latest jQuery library and hammer.js in your web page.

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

2. Include the itemslide.js script after jQuery library.

<script src="src/itemslide.js"></script>

3. Add your content to the slider using Html unordered list.

  <li> Slide 1 </li>
  <li> Slide 2 </li>
  <li> Slide 3 </li>

4. You can add some anchor elements to scroll to target slide using gotoSlide() method.

<span onclick="$('ul').gotoSlide(0)">Slide 1</span>
<span onclick="$('ul').gotoSlide(1)">Slide 2</span>
<span onclick="$('ul').gotoSlide(2)">Slide 3</span>

5. Initialize the content slider with default options.

$(document).ready(function (){

6. Options and defaults.

// duration of swipe animation
duration: 250,

// swiping sensitivity
swipe_sensitivity: 250,

// disable swiping and panning
disable_slide: false,

// disable click to slide
disable_clicktoslide: false,

// disable the automatic calculation of width (so that you could do it manually) 
disable_autowidth: false,

// disable the sliding triggered by mousewheel scrolling
disable_scroll: false,

// start slide
start: 0,

// set true for "one slide per swipe" navigation
one_item: false, 

// can be also considered as panning sensitivity
pan_threshold: 0.3, // precentage of slide width

// set this to true if you want the width of the slides to be the width of the parent of ul
parent_width: false,

// enable the swipe out feature - enables swiping items out of the carousel
swipe_out: false, 

// restricts the movements to the borders instead of the middle
left_sided: false,

// infinite loop
infinite: false

7. Public methods.

  • getActiveIndex(): get current active slide index
  • getCurrentPos(): get current position of carousel (pixels)
  • next(): goes to next slide
  • previous(): goes to previous slide
  • gotoSlide(i): goes to a specific slide by index
  • reload(): recalculates width and center object
  • addSlide(data): adds in the end of the carousel a new item
  • removeSlide(index): removes a specific slide by index

8. Events.

carousel.on('changePos', function(e) {
  // when the position of the carousel is changed

carousel.on('pan', function(e) {
  // when user pans

carousel.on('changeActiveIndex', function(e) {
  // when the current active item has changed

carousel.on('swipeout', function(e, slide) {
  // when user swipes out a slide (if swipe_out is enabled)

carousel.on('clickSlide', function(e, slide) {
  // when clicking/tapping a slide


v1.6.0 (2020-06-20)

  • Fixed bug of multiple sliders with different options

v1.5.0 (2020-03-08)

  • Fixed bug of multiple sliders with different options


  • Bugfixed


  • Fixed bugs on ie


  • Added new swipe out feature.
  • Fixed minor bug.
  • Added bower.
  • Fixed bug and added swipeout event.


  • More natural sliding.


  • Fixed bug


  • Improved springy panning on edges and cleaned code.


  • Fixed vertical scroll bug


  • Fixed event triggering bug


  • Improved code efficiency. Layout changes.


  • minor fixes.


  • improved springy panning when out of edges


  • Fixed some ios bugs


  • Changed sliding mechanic for more natural sliding. 
  • Minor bug fixes.


  • Minor fix.


  • Bug Fix


  • Bug fixes and minor code changes


  • Fixed some major bugs.


  • Fixed lag on firefox, now works smooth on all major browers.


  • Reverted back to transform3d, bug fix


  • Changed motion technic for a more consistent motion and for cross browser support


  • Fixed a minor mistake
  • Added a new option


  • Few layout changes
  • cleaner code
  • small fix


  • Added mousewheel capability (optional plugin) and fixed a bug
  • Changed scrolling direction


  • Fixed an issue with the click to scroll for that added a small dependency check readme for details


  • Fixed a major bug that caused an inconsisitent duration when you slide fast


  • Now you can apply itemslide on more than one html object!


  • fixed small issue of last slide not appearing in some screen sizes
  • added an event fixed some methods

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