Responsive Automatic Slider Carousel Plugin For CSS3 jQuery

response-carousel-css3-jquery use css3 transition first if the browser doesn’t support it, then use jquery animate.

How to make use of it:

1. Load the required response-carousel.css in the header, and response-carousel.js.

<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 photos to 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 logo slider options.

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);

Read More –

A Versatile Automatic Any Image Comparison Slider In jQuery
Responsive Image Slider Show With Counter And Description Text Library


See Demo And Download

Official Website(sky790312): Click Here

This superior jQuery/javascript plugin is developed by sky790312. For extra advanced usage, please go to the official website.

Share