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.

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

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 (){
  $("ul").initslide();
});

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
});

Changelog:

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

2017-03-24

• Bugfixed

2015-02-08

• Fixed bugs on ie

2015-02-07

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

2014-12-22

• More natural sliding.

2014-12-18

• Fixed bug

2014-12-14

• Improved springy panning on edges and cleaned code.

2014-12-12

• Fixed vertical scroll bug

2014-12-03

• Fixed event triggering bug

2014-11-27

• Improved code efficiency. Layout changes.

2014-11-23

• minor fixes.

2014-11-22

• improved springy panning when out of edges

2014-11-21

• Fixed some ios bugs

2014-11-20

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

2014-11-18

• Minor fix.

2014-11-17

• Bug Fix

2014-11-11

• Bug fixes and minor code changes

2014-11-08

• Fixed some major bugs.

2014-11-03

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

2014-11-01

• Reverted back to transform3d, bug fix

2014-10-31

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

2014-10-29

• Fixed a minor mistake
• Added a new option

2014-10-24

• Few layout changes
• cleaner code
• small fix

2014-10-18

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

2014-10-16

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

2014-10-15

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

2014-10-15

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

2014-10-13

• 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.