<ul> <li> Slide #1 </li> <li> Slide #2 </li> </ul>
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_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").initslide( { disable_slide: true, duration: 1500 } );
Get
- getActiveIndex() - get current active slide index
- getCurrentPos() - get current position of carousel (pixels)
console.log($("ul").getActiveIndex());
Set
- 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: addSlide automatically adds li tags.
$("ul").next(); $("ul").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 swiped out slide
$("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.