Simple Responsive Background Image Cycler With jQuery
File Size: | 14.4 KB |
---|---|
Views Total: | 4506 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
A simple, responsive, fullscreen jQuery slideshow plugin that rotates the images with a z-index behind the page content to give the appearance of a background image.
How to use it:
1. Add your images as backgrounds to the DIV containers following the markup structure like this:
<div id="background_cycler" > <div class="img active" style="background:url('1.jpg') top left no-repeat; background-size:cover;"></div> <div class="img" style="background:url('2.jpg') top left no-repeat; background-size:cover;"></div> <div class="img" style="background:url('3.jpg') top left no-repeat; background-size:cover;"></div> <div class="img" style="background:url('4.jpg') top left no-repeat; background-size:cover;"></div> <div class="img" style="background:url('5.jpg') top left no-repeat; background-size:cover;"></div> </div>
2. The required CSS styles for the background slideshow.
#background_cycler { padding: 0; margin: 0; width: 100%; height: 100%; overflow: hidden; position: absolute; top: 0; left: 0; z-index: -1; } #background_cycler .img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; } #background_cycler .img.active { z-index: 3; }
3. Include jQuery library and the jQuery slideshow.js script on the webpage.
<script src="//code.jquery.com/jquery.min.js"></script> <script src="js/slideshow.js"></script>
4. The JavaScript to hide the background while the images have been loaded, ready to fade in later.
$('#background_cycler').hide();
This awesome jQuery plugin is developed by k0lt4y. For more Advanced Usages, please check the demo page or visit the official website.