ItemSlide.js
Docs Github
DOWNLOAD (8K)


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


CSS

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").itemslide();


  • duration - duration of swipe 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 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)
  • 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)

Example implementation

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


Get


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

Set


$("ul").next();
$("ul").addSlide("New Slide");

Events


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

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

Classes

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



Created by Nir Lichtman. Design by Idan Abarbanel.