Cross-fading Image Slideshow / Carousel Plugin - Banner.js
File Size: | 3.7 KB |
---|---|
Views Total: | 2258 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A minimal jQuery based cross-fading slideshow created for desktop website that loops infinitely and automatically through an html list of images with arrow navigation and numeric pagination.
How to use it:
1. Build the html structure and insert your own images to the slideshow as follows:
<div class="banner"> <ul class="img"> <li><a href=""><img src="1.jpg" alt=""></a></li> <li><a href=""><img src="2.jpg" alt=""></a></li> <li><a href=""><img src="3.jpg" alt=""></a></li> <li><a href=""><img src="4.jpg" alt=""></a></li> <li><a href=""><img src="5.jpg" alt=""></a></li> <li><a href=""><img src="6.jpg" alt=""></a></li> </ul> <ul class="num"> </ul> <div class="left btn"><</div> <div class="right btn">></div> </div>
2. The primary CSS rules to style the slideshow and its controls.
ul { list-style: none; } .banner { position: relative; width: 730px; height: 454px; margin: 50px auto; cursor: pointer; outline: 2px solid #000; } .img li { display: none; position: absolute; left: 0; top: 0; } .banner .num { position: absolute; bottom: 20px; width: 100%; text-align: center; font-size: 0; } .num li { display: inline-block; width: 30px; height: 30px; line-height: 30px; text-align: center; border-radius: 50%; font-size: 16px; background-color: #333; color:#fff; margin: 0 3px; cursor: pointer; } .num li.active { background-color: #a00; } .banner .btn { display: none; position: absolute; top: 50%; width: 60px; height: 80px; margin-top: -40px; line-height: 80px; text-align: center; background-color: rgba(0,0,0,0.5); color:#fff; } .banner:hover .btn { display: block; } .banner .left { left: 0; } .banner .right { right: 0; }
3. Download and include the jQuery Banner.js script after you've included jQuery library.
<script src="//code.jquery.com/jquery.min.js"></script> <script src="js/banner.js"></script>
This awesome jQuery plugin is developed by xum1100. For more Advanced Usages, please check the demo page or visit the official website.