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.
