jq-bgslider
v2.1.0
Published
A simple full-page jQuery background slider.
Downloads
129
Maintainers
nathanhleungReadme
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/.