jq-bgslider
Advanced tools
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).
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://unpkg.com/jq-bgslider@2.0.2/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>
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,
});
jqBgslider([options])Loads the background slider on the <body> with the provided options.
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.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/.
FAQs
A simple full-page jQuery background slider.
The npm package jq-bgslider receives a total of 48 weekly downloads. As such, jq-bgslider popularity was classified as not popular.
We found that jq-bgslider demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
PyPI confirms no security flaws were exploited in the Ultralytics supply chain attack and highlights improvements for safer package publishing.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.