Easy Customizable jQuery Image Slider Plugin - reSlider

reSlider is an easy-to-use and fully customizable jQuery slider plugin for presenting your images in an elegant way.

Key features:

• Auto play on page load.
• Infinite looping like a carousel.
• Custom transition effects.
• Thumbnails navigation.
• Supports bothhorizontal and vertical orientations.

How to use it:

1. Add references to jQuery library, jquery.re-slider.css and jquery.re-slider.js on your web page.

<link rel="stylesheet" href="jquery.re-slider.css">
<script src="jquery.min.js"></script>
<script src="jquery.re-slider.js"></script>

2. Add a group of images to the slider.

<div class="reSlider">
  <div class="reSlider-slide-container">
    <div class="reSlider-slides">
      <div class="reSlider-slide">
        <img src="1.jpg">
      </div>
      <div class="reSlider-slide">
        <img src="2.jpg">
      </div>
      <div class="reSlider-slide">
        <img src="3.jpg">
      </div>
      <div class="reSlider-slide">
        <img src="4.jpg">
      </div>
      <div class="reSlider-slide">
        <img src="5.jpg">
      </div>
    </div>
  </div>
</div>

3. Add next / prev navigation buttons to the image slider.

<button class="reSlider-prev">Prev</button>
<button class="reSlider-next">Next</button>

4. Add navigation thumbnails to the image slider.

<div class="reSlider-thumbnail-container">
  <div class="reSlider-thumbnail-list">
    <div class="reSlider-thumbnail-box">
      <img src="1.jpg">
      <div class="reSlider-thumbnail-mask"></div>
    </div>
    <div class="reSlider-thumbnail-box">
      <img src="2.jpg">
      <div class="reSlider-thumbnail-mask"></div>
    </div>
    <div class="reSlider-thumbnail-box">
      <img src="3.jpg">
      <div class="reSlider-thumbnail-mask"></div>
    </div>
    <div class="reSlider-thumbnail-box">
      <img src="4.jpg">
      <div class="reSlider-thumbnail-mask"></div>
    </div>
    <div class="reSlider-thumbnail-box">
      <img src="5.jpg">
      <div class="reSlider-thumbnail-mask"></div>
    </div>
  </div>
</div>

5. Initialize the image slider with default options.

$(function(){
  $('#demo').reSlider();
});

6. Default configuration options.

// start index
current              : 0,

// width of the image slider
width                : 900,

// slideshow mode (auto play)
slideShow            : true, 

// transition delay
slideShowDelay       : false,

// pause on hover
hoverStop            : false,

// auto play interval
interval             : 5000, 

// enable fadeIn transitions
fadeIn               : false, 
fadeInDuration       : 1500,
fadeInEasing         : 'swing',  

// infinite looping
loop                 : true, 
rouletteLoop         : false,

// horizontal or vertical
orientation          : 'horizontal',    

// reverse orientation
reverse:false,  

// slide CSS classes
slideContainer       : '.reSlider-slide-container',
slides               : '.reSlider-slides',
slide                : '.reSlider-slide',

// slide options
slideWidth           : 900, 
slideHeight          : 400, 
slideDuration        : 500, 
slideEasing          : 'swing', 
slidePrevBtn: '.reSlider-prev',
slideNextBtn: '.reSlider-next',

// thumbnail navigation options
thumbnailContainer   : '.reSlider-thumbnail-container',
thumbnails           : '.reSlider-thumbnail-list',
thumbnail            : '.reSlider-thumbnail-box',
thumbnailMask        : '.reSlider-thumbnail-mask',
thumbnailPosition    : 'right', 
thumbnailWidth       : 160, 
thumbnailHeight      : 57,  
thumbnailMaskDuration: 500, 
thumbnailMaskEasing  : 'linear'

---

This awesome jQuery plugin is developed by Y-Kogawa. For more Advanced Usages, please check the demo page or visit the official website.