jQuery plugin for a touch enabled carousel

Website

Full Screen Example

• jQuery
• Hammer.js

• Hammer jQuery Extension (Adds click to slide) (~0.5KB)
• jQuery Mousewheel (Adds scrolling) (~2.5KB)

$ npm install itemslide

You can use our exisiting css and change the sizes or just make your own but make sure that its based upon:

ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    position: absolute;
    
    -webkit-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;
}
li {
    float: left;
}

<ul>
<li>
Slide #1
</li>
<li>
Slide #2
</li>
</ul>

$("ul").initslide();

• 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)
• disable_scroll - disable scrolling {default: false}
• start - index of slide that appears when initializing {default: 0}
• pan_threshold - can be also considered as panning sensitivity {default: 0.3}(precentage of slide width)

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

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

console.log($("ul").getActiveIndex());

• 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)
• addSlide(data) - adds in the end of the carousel a new item.
• removeSlide(index) - removes a specific slide by index.
• NOTE: after calling addSlide you need to call reload in order to see the new slides.

$("ul").next();

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

The current active slide gets the 'active' id.

Currently the only (and default) easing is easeOutQuart.