Responsive Background Image Slider Plugin - jQuery sliderResponsive

sliderResponsive is a tiny jQuery plugin for creating a fully responsive background image carousel/slider/slideshow with animated captions and pagination/navigation controls.

More features:

• Auto rotation.
• Auto pause on hover.
• Zoom on hover.
• Configurable animation speed & transition delay.

View more:

• Top 50 Best Carousel jQuery Plugins

How to use it:

1. Include the plugin and other resources in the html file.

<link href="sliderResponsive.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="sliderResponsive.js"></script>

2. Add custom background images together with caption bar and pagination arrows to the slider.

<div class="slider" id="slider-demo">
  <!-- Slides -->
  <div style="background-image:url(1.jpg)"></div>
  <div style="background-image:url(2.jpg)"></div>
  <div style="background-image:url(3.jpg)"></div>
  <div style="background-image:url(4.jpg)"></div>
  <div style="background-image:url(5.jpg)"></div>
  <!-- The Arrows -->
  <i class="left" class="arrows" style="z-index:2; position:absolute;"><svg viewBox="0 0 100 100"><path d="M 10,50 L 60,100 L 70,90 L 30,50  L 70,10 L 60,0 Z"></path></svg></i>
  <i class="right" class="arrows" style="z-index:2; position:absolute;"><svg viewBox="0 0 100 100"><path d="M 10,50 L 60,100 L 70,90 L 30,50  L 70,10 L 60,0 Z" transform="translate(100, 100) rotate(180) "></path></svg></i>
  <!-- Caption Bar -->
  <span class="titleBar">
    <h1>Slider Description Here</h1>
  </span>
</div>

3. Initialize the plugin to generate a basic slider with default settings.

$("#slider-demo").sliderResponsive();

4. Customize the slider as per your needs.

$("#slider-demo").sliderResponsive({

  // transition delay
  slidePause: 5000,

  // animation speed
  fadeSpeed: 800,

  // enable autoplay
  autoPlay: "on",

  // show navigation arrows
  showArrows: "off",

  // hide pagination bullets
  hideDots: "off",

  // show 'zoom on hover' effect
  hoverZoom: "on",

  // place the caption bar on the top
  titleBarTop: "off"
  
});

---

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