Minimal Background Image Fader with jQuery - bgfader
File Size: | 5.17 KB |
---|---|
Views Total: | 2266 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Just another jQuery responsive background slideshow plugin which fades through an array of background images within a specific container. It supports auto resizing of background images to fit any screen size.
How to use it:
1. Download the bgfader plugin and include the bgfader.js
script after loading jQuery library.
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="js/bgfader.js"></script>
2. Create a slideshow content with a fixed height.
<div class="banner"> ... </div>
.banner { height:400px; }
3. Call the function on the 'banner' container and specify an array of background images.
var myBgFader = $('.banner').bgfader([ '1.jpg', '2.jpg', '3.jpg', ])
4. Start the background slideshow.
myBgFader.start()
5. Several options to customize the background slideshow.
var myBgFader = $('.header').bgfader([ '1.jpg', '2.jpg', '3.jpg', ], { 'timeout': 3000, 'speed': 3000, 'opacity': 0.5 })
Change log:
2015-12-04
- remove overlay when 'destroy'.
2015-12-01
- JS update
This awesome jQuery plugin is developed by naoxink. For more Advanced Usages, please check the demo page or visit the official website.