Responsive Banner Slider/Carousel Plugin For jQuery

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

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.