Minimalist Fading Slideshow with jQuery - Opacity Slider

Opacity Slider is an extremely lightweight (~2kb) jQuery crossfading slideshow plugin that automatically changes the opacity of your images when switching between them.

How to use it:

1. Add a series of images to the slideshow.

<div id="demo" class="container">
  <img class="bondFrame" src="1.jpg">
  <img class="bondFrame" src="2.jpg">
  <img class="bondFrame" src="3.jpg">
</div>

2. Set the width / height of your slideshow.

.container {
  width: 400px;
  height: 300px;
  background: #fff;
  padding: 5px;
  margin: 30px auto;
}

.bondFrame {
  position: absolute;
  width: 400px;
  height: 300px;
  opacity: 0.8;
}

3. Add jQuery library and the jQuery Opacity Slider plugin at the bottom of the webpage.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="jquery.bondOpacitySliderMini-1.0.js" ></script>

4. Initialize the slideshow plugin with default options.

$("#demo").bondOpacitySlider();

5. All configuration options with default values.

// transition delay
autoPlayTime: 5000,

// mouse hover to stop the autoplay
autoPlaySuspend: true,

// active slide
activeFrame: 0,

// constants.fade.slow
// constants.fade.fast
// constants.fade.normal
speedOpacity: constants.fade.slow,

// constants.direct.next
// constants.direct.prev
autoPlayDirect: constants.direct.next,

// CSS class for item wrapper
frame: "bondFrame"

---

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