Fullscreen Automatic Background Slider Plugin For jQuery

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


5. Default plugin options.


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