Docs Github

<div id="scrolling">
        Slide #1
        Slide #2


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=""></script>

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

  • 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");
        disable_slide: true,
        duration: 1500



carousel.addSlide("New Slide");


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

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


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


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