Easy Mobile-friendly jQuery Image Slider Plugin - DVslider

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.