Responsive Cross-fading Slideshow Plugin with jQuery - aSlider

aSlider is a simple and lightweight jQuery plugin for creating a responsive image slideshow with auto crossfade animation and subtle caption hover effects.

How to use it:

1. Load the jQuery javascript library and the JQuery aSlider plugin at the bottom of your web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="aslider.js"></script>

2. Insert your images with captions into your web page and set the options using Html5 data-* attributes as follows.

<div class="aslider"
 data-slide="aslider" 
 data-speed="1500" 
 data-wait="3000" 
 data-preview="yes" 
 data-dots="yes">

  <div id="s1" class="slide"> <img src="1.jpg">
    <div class="caption">
      <h2>Slide 1 Title</h2>
      <p>Slide 1 Description</p>
    </div>
    <a href="#">go to link</a> </div>
    
  <div id="s2" class="slide"> <img src="2.jpg">
    <div class="caption">
      <h2>Slide 2 Title</h2>
      <p>Slide 2 Description.</p>
      <a href="#">go to link</a> </div>
  </div>
  
  <div id="s3" class="slide"> <img src="3.jpg">
    <div class="caption">
      <h2>Slide 3 Title</h2>
      <p>Slide 3 Description</p>
      <a href="#">go to link</a> </div>
  </div>
    
</div>

3. Add the required CSS file in your page's head section.

<link rel="stylesheet" href="aslider.min.css">

Change log:

2014-07-28

• added arrows/dots navigation.

---

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