Minimalist Fading Slideshow with jQuery - Opacity Slider

Minimalist Fading Slideshow with jQuery - Opacity Slider
File Size: 4.53 KB
Views Total: 2128
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

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">

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="//"></script>
<script src="jquery.bondOpacitySliderMini-1.0.js" ></script>

4. Initialize the slideshow plugin with default options.


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.normal
speedOpacity: constants.fade.slow,


// 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.