DVslider
Just another jQuery slider
Options
firstSlide: 1, // # of first slide animationWait: 6000, // time between autoplay animationSpeed: 800, // transition speed animationEasing: 'easeInOutQuint', // transition easing animationEasingCss: 'ease-in-out', // transition easing (using css transitions) autoChange: false, // autoplay enabled pager: true, // show pagination nav: false, // show navigation using < and > count: false, // show count (ex.: 1 slide of 12 ) swiping: true, // enable swiping for touch devices gap: 0, // gap between slides (must add margin-left or whatever in css) pagerClass: '', // extra pagination class width: // width of slider function(sliderElement) { return sliderElement.outerWidth(); }, onChange: // event on slide change function(sliderElement, activeSlide, previousSlide) {}Mthods
// change to next slide $('.dvslider').dvslider('next'); // change to previous slide $('.dvslider').dvslider('prev'); // change to # slide $('.dvslider').dvslider('change', 3); Special attributes
// change to next slide <a data-dvslider-change="next">...</a> // change to previous slide <span data-dvslider-change="prev">...</span> // change to # slide <button data-dvslider-change="3">...</button> // change to .selector slide <a data-dvslider-change="#mySlide">...</a>usage:
<div class="dvslider"> <div class="dvslider-slider"> <div class="dvslider-slide" id="slide1"> <a data-dvslider-change="next">next slide</a> </div> <div class="dvslider-slide" id="slide2"> <a data-dvslider-change="prev">previous slide</a> </div> <div class="dvslider-slide" id="slide3"> <a data-dvslider-change="5">change to #5 slide</a> </div> <div class="dvslider-slide" id="slide4"> <a data-dvslider-change="#slide2">change to #slide2</a> </div> <div class="dvslider-slide" id="slide5"> <a data-dvslider-change="1">first slide</a><br/> <a data-dvslider-change="#slide2">second slide</a> </div> </div> </div>
