Responsive Automatic Banner Slider Plugin For jQuery - J Sliding Banner
File Size: | 10 KB |
---|---|
Views Total: | 7378 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
J Sliding Banner is a responsive, flexible, customizable jQuery banner slider/carousel plugin which allows to automatically loops through an list of mixed content at a configurable speed.
How to use it:
1. Load jQuery library together with the J Slider Banner plugin's JavaScript and CSS files in the html file.
<link rel="stylesheet" href="j-sliding-banner.min.css"> <script src="//code.jquery.com/jquery-3.1.0.min.js"></script> <script src="j-sliding-banner.min.js"></script>
2. Create a list of mixed content to be displayed in the banner slider as follows:
<div class="banner"> <div class="sliding-banner-container"> <ul class="sliding-banner"> <li class="sliding-banner-item"> <img class='sliding-banner-img' src="1.jpg"> <div class="sliding-banner-content"> <div> <div class="content"> Content 1 </div> </div> </div> </li> <li class="sliding-banner-item"> <img class="sliding-banner-img" src="2.jpg"> <div class="sliding-banner-content"> <div> <div class="content"> Content 2 </div> </div> </div> </li> <li class="sliding-banner-item"> <img class="sliding-banner-img" src="3.jpg"> <div class="sliding-banner-content"> <div> <div class="content"> Content 3 </div> </div> </div> </li> </ul> </div> </div>
3. Calling the function on the top container will initialize the plugin with default options.
$('.banner').jSlidingBanner();
4. Customization options which can be passed as an object to the jSlidingBanner()
function.
$('.banner').jSlidingBanner({ setOverlay : true, overlayColor : "#000000", displayImageDuration : 4000, slideAnimationSpeed : 500, });
This awesome jQuery plugin is developed by waiyanhein. For more Advanced Usages, please check the demo page or visit the official website.