Responsive Banner Slider/Carousel Plugin For jQuery
File Size: | 10.8 KB |
---|---|
Views Total: | 11685 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A lightweight and flexible jQuery plugin for creating a responsive, infinite-looping, auto-rotating image slider/carousel to showcase your favorite images in the banner section. The plugin uses CSS3 transitions to animate slides with a fallback to jQuery's animate when CSS transitions are not supported
How to use it:
1. Load the required responsive-carousel.css
in the header, and the responsive-carousel.js
at the bottom, after jQuery library.
<head> ... <link href="responsive-carousel.css" rel="stylesheet"> ... </head> <body> ... <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="responsive-carousel.js"></script> ... </body>
2. Add your images into the banner slider.
<div class="carousel"> <!-- Images here --> <div class="carousel-inner"> <div class="slide active"> <a href=""><img src="1.jpg"></a> </div> <div class="slide"> <a href=""><img src="2.jpg"></a> </div> <div class="slide"> <a href=""><img src="3.jpg"></a> </div> </div> <!-- Arrows navigation --> <div class="arrow arrow-left"></div> <div class="arrow arrow-right"></div> </div>
3. Custom options for the banner slider.
var opts = { // CSS class for 'next' arrow arrowRight : '.arrow-right', // CSS class for 'prev' arrow arrowLeft : '.arrow-left', // Animation speed speed : 700, // Auto-play delay time slideDuration : 4000 };
4. Initialize the plugin.
$('.carousel').BannerSlide(opts);
This awesome jQuery plugin is developed by sky790312. For more Advanced Usages, please check the demo page or visit the official website.