ItemSlide.js
Docs Github
DOWNLOAD (10K)


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

<script src="http://itemslide.github.io/dist/itemslide.min.js"></script>


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


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


Get


console.log(carousel.getActiveIndex());

Set


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

Events


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">)

- You don't have to use a list for the carousel. you can use any other elements instead as long as its the same structure as here.



Created by Nir Lichtman. Design by Iddan Aharonson.