Minimal Background Image Slider Plugin For jQuery - Mini BgSwitcher

File Size: 4.83 KB
Views Total: 1336
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Minimal Background Image Slider Plugin For jQuery - Mini BgSwitcher

Mini BgSwitcher is an ultra-light jQuery plugin used to switch background images of your webpage / container like an image slider or a fullscreen background slideshow.

How to use it:

1. Include jQuery library and the jQuery Mini BgSwitcher plugin at the bottom of the web page.

<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 fullscreen background slider.

body {
  position: relative;
  overflow-x: hidden;
}

.bg-slider-img {
  position: fixed;
  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 params = {
    images: ['1.jpg', '2.jpg', '3.jpg']
};

4. Initialize the background image slider.

bgSlider(params);

5. Plugin's default parameters.

// an array of backgroundn images
images: ['http://i.imgur.com/gz0Yq3E.jpg', 'http://i.imgur.com/e3Fjb93.jpg', 'http://i.imgur.com/8FoJQYg.jpg'],

// target container
el: 'body',

// animation duration
animDuration: 500,

// sliding duration
slideDuration: 5000

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