Minimalist Fading Slideshow with jQuery - Opacity Slider
File Size: | 4.53 KB |
---|---|
Views Total: | 2204 |
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"> </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.