Minimal Background Image Slider Plugin For jQuery - Mini BgSwitcher

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

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


5. Plugin's default parameters.

// an array of backgroundn images
images: ['', '', ''],

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