Simple Configurable Background Slideshow Plugin - slidesbg.js

slidesbg.js is a simple, configurable and multi-purpose jQuery plugin used for generating a background slideshow from an array of images you specify.

Features:

• Fully responsive and highly customizable.
• Auto rotation at a given interval.
• Keyboard interaction.
• Fullscreen mode.

Basic usage:

1. Include the stylesheet slidesbg.css in the head section and the JavaScript file slidesbg.js after jQuery library.

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

2. Create an array of images for backgrounds.

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

3. Initialize the background slideshow with default settings.

$(".container").slidesbg({
  dataSlide: sliders
})

4. All default plugin settings.

$(".container").slidesbg({

  // an array of background images
  dataSlide: "",

  // namespace
  namespace: "slidesbg",

  // CSS selector for navigation
  navSelector: ".slidesbg-slider-nav",

  // displays navigation
  nav: true,

  // additional CSS for navigation
  customNav: "",

  // displays pagination
  pagination: true,

  // top offset of navigation / pagination
  offsetTop: {
    pagination: false,
    nav: false
  },

  // autoplay
  autoPlay: true,

  // autoplay delay in ms
  delay: 10000,

  // transition speed in ms
  speed: 300,

  // start slide
  start: 0,

  // parallax effect
  parallax: false,

  // display overlay
  overlay: false,

  // fullscreen mode
  fullscreen: false,

  // enables keyboard navigation
  keyboard: false,

  // for parallax effect
  inbody: false,

  // callbacks
  beforeAct: function() {},
  complete: function() {}
  
})

---

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