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