<div id="scrolling"> <ul> <li> Slide #1 </li> <li> Slide #2 </li> </ul> </div>
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; }
You can download the latest itemslide.min.js and then include it on your website
<script src="scripts/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
- 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">)