Responsive Banner Slider/Carousel Plugin For jQuery

File Size: 10.8 KB
Views Total: 11260
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.

  <link href="responsive-carousel.css" rel="stylesheet">

  <script src="//"></script>
  <script src="responsive-carousel.js"></script>

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 class="slide">
      <a href=""><img src="2.jpg"></a> 
    <div class="slide">
      <a href=""><img src="3.jpg"></a> 
  <!-- Arrows navigation -->
  <div class="arrow arrow-left"></div>
  <div class="arrow arrow-right"></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.


This awesome jQuery plugin is developed by sky790312. For more Advanced Usages, please check the demo page or visit the official website.