Easy Mobile-friendly jQuery Image Slider Plugin - DVslider
File Size: | 10.6 KB |
---|---|
Views Total: | 1152 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
DVslider is a lightweight and easy-to-use jQuery plugin which helps you create a carousel-style slider to showcase your featured images.
Features:
- Easy to style using your own CSS
- Touch events supported.
- Custom slider controls and counts.
- Auto slide to the first image when you reach the last one.
- CSS3 based easing effects.
- Autoplay.
- Lots of configuration options and API.
How to use it:
1. The basic html structure for the image slider.
<div class="dvslider"> <div class="dvslider-slider"> <div class="dvslider-slide"> <img src="1.jpg"/> </div> <div class="dvslider-slide"> <img src="2.jpg"/> </div> <div class="dvslider-slide"> <img src="3.jpg"/> </div> <div class="dvslider-slide"> <img src="4.jpg"/> </div> <div class="dvslider-slide"> <img src="5.jpg"/> </div> </div> </div>
2. Download and insert the jQuery DVslider plugin's files into the webpage. Make sure you first have jQuery library included.
<link rel="stylesheet" href="css/dvslider.css"> <script src="//code.jquery.com/jquery.min.js"></script> <script src="js/dvslider.min.js"></script>
3. Initialize the image slider by calling the function on the top container as this:
$('.dvslider').dvslider();
4. Configure the image slider by passing the following options to the .dvslider
method.
$('.dvslider').dvslider({ // # of first slide firstSlide: 1, // time between autoplay animationWait: 6000, // transition speed animationSpeed: 800, // transition easing animationEasing: 'easeInOutQuint', // transition easing (using css transitions) animationEasingCss: 'ease-in-out', // autoplay enabled autoChange: false, // show pagination pager: true, // show navigation using < and > nav: false, // show count (ex.: 1 slide of 12 ) count: false, // enable swiping for touch devices swiping: true, // extra pagination class pagerClass: '', // gap between slides (need to set margin-left in css) gap: 0, // width of slider width: function(el) { return el.outerWidth(); }, // event on slide change onChange: function(el, activeSlide, previousSlide) {} });
5. API methods.
// goto next slide $('.dvslider').dvslider('next'); // back to previous slide $('.dvslider').dvslider('prev'); // goto slide 3 $('.dvslider').dvslider('change', 3);
6. You can also add custom controls to the slider using data
attributes as follows:
<!-- goto to next slide --> <a data-dvslider-change="next">...</a> <!-- back to previous slide --> <span data-dvslider-change="prev">...</span> <!-- goto slide 3 --> <button data-dvslider-change="3">...</button> <!-- goto .selector slide --> <a data-dvslider-change="#mySlide">...</a>
This awesome jQuery plugin is developed by purtiklis. For more Advanced Usages, please check the demo page or visit the official website.