Dynamic Background Image Slider Plugin - jQuery bgslider

Yet another jQuery background slider plugin which automatically slides through a series of background images at a given speed.

The plugin dynamically applies background images defined in a JavaScript array to the slides after init.

Dead simple, really lightweight and fully responsive.

By default, the background slider will be appended to the whole body (fullscreen). However you can override the default selector to display the background slider on any container.

How to use it:

1. Install & download.

# NPM
$ npm install jq-bgslider  --save

2. Import the jq-bgslider.

import jqBgslider from 'jq-bgslider';

3. Or directly load the jq-bgslider plugin from a CDN.

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://unpkg.com/jq-bgslider"></script>

4. Intialize the background slider and define an array of images for the background.

jqBgslider.default({
  images: [
    'https://source.unsplash.com/2200x1900/?fitness',
    'https://source.unsplash.com/2200x1900/?yoga',
    'https://source.unsplash.com/2200x1900/?gym',
    'https://source.unsplash.com/2200x1900/?girl',
    'https://source.unsplash.com/2200x1900/?cat',
    'https://source.unsplash.com/2200x1900/?dog',
  ],
});

5. Append the background slider to a specific container. Default: body.

jqBgslider.default({
  selector: '#slider'
});

6. Override the default transition delay and animation speed.

jqBgslider.default({
  animDuration: 1000,
  slideDuration: 5000
});

---

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