Fullscreen Automatic Background Slider Plugin For jQuery

Background Switcher is a minimalist jQuery plugin used to create a responsive, full-page, auto-rotating image slideshow / slider for your website background.

How to use it:

1. Download, unzip and include the mini-jquery-bgswitcher.js script after jQuery JavaScript library.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="mini-jquery-bgswitcher.js"></script>

2. The required CSS styles for the background slider.

html, * {
  overflow-x: hidden;
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%
}

body { position: relative; }

.bg-slider-img {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100%;
  background-size: cover;
}

3. Create an array of images for the background slider.

var images = ['1.jpg', '2.jpg', '3.jpg'];

4. Initialize the plugin to append the background slider to the body tag.

bgSlider({/*OPTIONS*/});

5. Default plugin options.

bgSlider({

  // array of images
  images:images, 

  // animation duration
  animDuration: 500, 

  // transition delay
  slideDuration: 3000,

  // target container
  el: 'body'
  
});

---

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