Minimal Background Image Slider Plugin For jQuery - Mini BgSwitcher
| File Size: | 4.83 KB |
|---|---|
| Views Total: | 1344 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
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.
How to use it:
1. Include jQuery library and the jQuery Mini BgSwitcher plugin at the bottom of the web page.
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="mini-jquery-bgswitcher.js"></script>
2. The required CSS styles for the fullscreen background slider.
body {
position: relative;
overflow-x: hidden;
}
.bg-slider-img {
position: fixed;
z-index: -1;
top: 0;
left: 0;
height: 100vh;
width: 100%;
background-size: cover;
}
3. Create an array of images for the background slider.
var params = {
images: ['1.jpg', '2.jpg', '3.jpg']
};
4. Initialize the background image slider.
bgSlider(params);
5. Plugin's default parameters.
// an array of backgroundn images images: ['http://i.imgur.com/gz0Yq3E.jpg', 'http://i.imgur.com/e3Fjb93.jpg', 'http://i.imgur.com/8FoJQYg.jpg'], // target container el: 'body', // animation duration animDuration: 500, // sliding duration slideDuration: 5000
This awesome jQuery plugin is developed by 18nleung. For more Advanced Usages, please check the demo page or visit the official website.











