Responsive Background Carousel Plugin For jQuery - slidesbg.js

slidesbg.js is a simple to use jQuery slideshow/carousel plugin which takes an array of images and converts them into a responsive, dynamic, fully configurable background carousel with custom controls.

More features:

• Auto rotation.
• Arrow keys interaction.
• Fullscreen mode.
• Custom animations.

How to use it:

1. Include the jQuery slidesbg.js plugin's style sheet in the header, and the JavaScript file slidesbg.js at the end of the document.

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

2. Create a container to place the background carousel.

<header id="banner">
</header>

3. Define an array of background images to be presented in the carousel.

var slides = [
    "1.jpg",
    "2.jpg",
    "3.jpg",
    ...
];

4. Initialize the background carousel.

$("#banner").slidesbg({
  dataSlide: slides
});

5. Plugin's default configuration options.

$("#banner").slidesbg({
  dataSlide: "",
  namespace: "slidesbg",
  navSelector: ".slidesbg-slider-nav",
  nav: true,
  customNav: "",
  pagination: true,
  offsetTop: {
    pagination: false,
    nav: false
  },
  autoPlay: true,
  delay: 10000,
  speed: 300,
  start: 0,
  parallax: false,
  overlay: false,
  fullscreen: false,
  keyboard: false,
  inbody: false,
  beforeAct: function() {},
  complete: function() {}
});

---

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