ItemSlide.js - Documentation

Getting Started

Markup

<div id="scrolling">
<ul>
    <li>
        Slide #1
    </li>
    <li>
        Slide #2
    </li>
</ul>
</div>

CSS

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

#scrolling { /* Carousel Frame */
    overflow: hidden;
}

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

Include Script

You can download the latest itemslide.min.js and then include it on your website

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

Initialize

var carousel;
$(document).ready(function () {
    carousel = $("ul");
    carousel.itemslide();
});

Options

duration - duration of slide animation {default: 350ms}
swipe_sensitivity - swiping sensitivity {default: 150}
disable_slide - disable swiping and panning {default: false}
disable_clicktoslide - disable click to slide {default: false}
disable_autowidth - disable the automatic calculation of width (so that you could do it manually) {default: false}
disable_scroll - disable the sliding triggered by mousewheel 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)
one_item - set this to true if the navigation is full screen or one slide every time. {default: false}
(Full Screen Example)
parent_width - set this to true if you want the width of the slides to be the width of the parent of ul. {default: false}
swipe_out - set this to true to enable the swipe out feature. {default: false} (Homepage has it enabled)
left_sided - left sided carousel (instead of default force-centered) {default: false}

Example implementation

var carousel;
carousel = $("ul");
carousel.itemslide(
    {
        disable_slide: true,
        duration: 1500
    }
);

Methods

Get

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

console.log(carousel.getActiveIndex());

Set

nextSlide() - goes to next slide
previousSlide() - 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: addSlide automatically adds li tags.

carousel.nextSlide();
carousel.addSlide("New Slide");

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
swipeout - triggered when user swipes out a slide (if swipe_out is enabled)
- event.slide - get index of swiped out slide
clickSlide - triggered when clicking/tapping a slide
- event.slide - get index of the clicked slide

carousel.on('changePos', function(e) {
        console.log("new pos: "+ carousel.getCurrentPos());
});

carousel.on('swipeout', function(event) {
        console.log("swiped out slide - "+ event.slide);
});

Classes

The current active slide gets the 'itemslide-active' class.

Extras

- attribute 'no-drag'- If you want to disable dragging only on a certain element in the carousel just add this attribute to the element. (example: <li no-drag="true">)