Simple Configurable Background Slideshow Plugin - slidesbg.js

File Size: 455 KB
Views Total: 2225
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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.


  • 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="//"></script>
<script src="slidesbg.js"></script>

2. Create an array of images for backgrounds.

var sliders = [

3. Initialize the background slideshow with default settings.

  dataSlide: sliders

4. All default plugin settings.


  // 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.