Minimal Background Image Slider Plugin For jQuery - Mini BgSwitcher
File Size: | 4.83 KB |
---|---|
Views Total: | 1336 |
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.