Responsive Background Carousel Plugin For jQuery - slidesbg.js

File Size: 7.4 KB
Views Total: 4178
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="//"></script>
<script src="slidesbg.js"></script>

2. Create a container to place the background carousel.

<header id="banner">

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

var slides = [

4. Initialize the background carousel.

  dataSlide: slides

5. Plugin's default configuration options.

  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.