ItemSlide.js – A touch enabled carousel

Download Demo

This jQuery plugin ItemSlide.js for a touch enabled carousel.

Dependencies

jQuery
Hammer.js

1. INCLUDE CSS AND JS FILES

2. HTML

• Slide #1
• Slide #2

3. JAVASCRIPT

$(“ul”).initslide();

4. OPTIONS

duration – duration of swipe animation {default: 250}
swipe_sensitivity – swiping sensitivity {default: 250}
disable_slide – disable swiping and panning {default: false}
disable_autowidth – disable calculation of width {default: false} (if you want to do it manually)
start – index of slide that appears when initializing {default: 0}

Example implementation

$(“ul”).initslide(
{
disable_slide:true,
duration:1500
}
);

5. METHODS

Get

getActiveIndex() – get current active slide index
getCurrentPos() – get current position of carousel (pixels)

console.log($(“ul”).getActiveIndex());

Set

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 (recommended to call when resize occures)

$(“ul”).next();

6. EVENTS

changePos – triggered when the position of the carousel is changed
pan – triggered when user pans
changeActiveIndex – triggered when the current active item has changed

$(“ul”).on(‘changePos’, function(event) {
console.log(“new pos: “+ $(“ul”).getCurrentPos());
});