Responsive Automatic Banner Slider Plugin For jQuery - J Sliding Banner

J Sliding Banner is a responsive, flexible, customizable jQuery banner slider/carousel plugin which allows to automatically loops through an list of mixed content at a configurable speed.

How to use it:

1. Load jQuery library together with the J Slider Banner plugin's JavaScript and CSS files in the html file.

<link rel="stylesheet" href="j-sliding-banner.min.css">
<script src="//code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="j-sliding-banner.min.js"></script>

2. Create a list of mixed content to be displayed in the banner slider as follows:

<div class="banner">
  <div class="sliding-banner-container">
    <ul class="sliding-banner">
      <li class="sliding-banner-item">
        <img class='sliding-banner-img' src="1.jpg">
        <div class="sliding-banner-content">
          <div>
            <div class="content">
              Content 1
            </div>
          </div>
        </div>
      </li>
      <li class="sliding-banner-item">
        <img class="sliding-banner-img" src="2.jpg">
        <div class="sliding-banner-content">
          <div>
            <div class="content">
              Content 2
            </div>
          </div>
        </div>
      </li>
      <li class="sliding-banner-item">
        <img class="sliding-banner-img" src="3.jpg">
        <div class="sliding-banner-content">
          <div>
            <div class="content">
              Content 3
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</div>

3. Calling the function on the top container will initialize the plugin with default options.

$('.banner').jSlidingBanner();

4. Customization options which can be passed as an object to the jSlidingBanner() function.

$('.banner').jSlidingBanner({
  setOverlay : true,
  overlayColor : "#000000",
  displayImageDuration : 4000,
  slideAnimationSpeed : 500,
});

---

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