Simple Cross-fading Background Image Slideshow Plugin with jQuery
File Size: | 484 KB |
---|---|
Views Total: | 1471 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
An extremely simple jQuery plugin to display a set of images as a background carousel/slideshow with cross-fade transitions.
How to use it:
1. Load jQuery JavaScript library and the jquery.slideshow.js
script in the document.
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <script src="js/jquery.slideshow.js"></script>
2. Prepare your images (slideshow-1.jpg, slideshow-2.jpg, slideshow-3.jpg and so on) and place them under the 'assets' folder.
3. The Html structure for the image slideshow.
<div class="container"> <div class="slideshow"> <div class="image"></div> <ul class="selectors"> <li><a href="javascript:slideshow_skip(1, true)"> <div class="button"></div> </a></li> <li><a href="javascript:slideshow_skip(2, true)"> <div class="button"></div> </a></li> <li><a href="javascript:slideshow_skip(3, true)"> <div class="button"></div> </a></li> <li><a href="javascript:slideshow_skip(4, true)"> <div class="button"></div> </a></li> </ul> </div> </div>
4. The required CSS styles for the image slideshow.
.slideshow { width: 825px; height: 550px; margin: 0px auto; position: relative; } .slideshow .image { width: 100%; height: 100%; } .slideshow .selectors { list-style: none; padding: 0px; position: absolute; bottom: 0; right: 0; margin-right: 50px; } .slideshow .selectors li { display: inline-block; } .slideshow .button { width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(0,0,0,0.5); } .slideshow .selected .button { background-color: rgba(0,0,0,0.5); }
5. That's it. You can override the plugin parameters at the beginning of the jquery.slideshow.js
.
var current = 0, loop, runningLoop = null, image = '.image', fade = 300, loopDelay = 2000, imageMaxCount = 4;
This awesome jQuery plugin is developed by Palmer11. For more Advanced Usages, please check the demo page or visit the official website.