🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

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.

Image-Slider background-slideshow

Documentation

jq-bgslider npm version Dependency Status

A simple full-page jQuery background slider.

Creates a full-screen sliding image background on your <body>. 2.13kB minified.

Check out a production demo on the website of Saffron Indian Kitchen, a fine Indian restaurant with two locations in the Greater Philadelphia Area. (Site design by Leung Enterprises).

Usage

Quick Start

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script src="https://unpkg.com/[email protected]/build/jq-bgslider.min.js"></script> <script>   // Originally in ES6, so default export is accessed via .default   jqBgslider.default({     images = [       'https://i.imgur.com/gz0Yq3E.jpg',       'https://i.imgur.com/e3Fjb93.jpg',       'https://i.imgur.com/8FoJQYg.jpg',     ],     slideDuration: 2000,     animDuration: 500,   }); </script>

Webpack

npm install jq-bgslider --save

// ES5 const jqBgslider = require('jq-bgslider').default;  // ES6 import jqBgslider from 'jq-bgslider';  jqBgslider({   images = [     'https://i.imgur.com/gz0Yq3E.jpg',     'https://i.imgur.com/e3Fjb93.jpg',     'https://i.imgur.com/8FoJQYg.jpg',   ],   slideDuration: 2000,   animDuration: 500, });

API

jqBgslider([options])

Loads the background slider on the <body> with the provided options.

Arguments

  • [options] (Object): If specified, customizes the behavior of the background slider.
    • [images] (Array): The images to be used in the background. Default value is a nice collection of nature images.
    • [slideDuration] (Number): The time, in milliseconds, to stay on each image/slide before switching to the next. Default value: 5000.
    • [animDuration] (Number): The duration, in milliseconds, of the animation between each image/slide. Default value: 1000.

Examples

jq-bgslider Demo

In the demo site, a translucent white overlay is added with the following CSS:

body::before {   display: block;   content: '';   position: fixed;   top: 0;   left: 0;   bottom: 0;   right: 0;   background: rgba(255,255,255,0.7); }

More examples can be found in the examples/ directory, including a Webpack demo.

This plugin is also used on http://www.saffronofphilly.com/.

License

MIT


You May Also Like