Minimal Background Carousel/Slideshow Plugin - jQuery Live Background
File Size: | 726 KB |
---|---|
Views Total: | 449 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A lightweight yet highly customizable jQuery tool that allows you to effortlessly create an automatic carousel or slideshow that can serve as the background for any element on your website.
With a range of customization options available, including animation speed, transition delay, and image brightness, you can create a unique and dynamic background that will captivate your visitors.
See Also:
How to use it:
1. Create a DIV container for the background slideshow.
<div id="live-bg"> <!-- Create two DIVs to switch between images --> <div class="background" id="background1"></div> <div class="background" id="background2"></div> <!-- Create a mirror DIV to configure the brightness of the images --> <div id="mirror"></div> </div>
2. Download and load the jQuery Live Background plugin's files in the HTML.
<!-- jQuery is required --> <script src="/path/to/cdn/jquery.min.js"></script> <!-- jQuery Live Background --> <link rel="stylesheet" href="/path/to/live-bg.css"> <script src="/path/to/live-bg.js"></script>
3. Initialize & activate the Live Background plugin.
$(function(){ // use default configuration config(); // start live background livebackground(); })
4. Name your background images with a format like bg-01.jpg, bg-02.jpg, bg-03.jpg and save them in the /assets/img folder. Check out the Configs section below for details on how to modify the image folder if needed.
5. Available configs.
- img_folder: Image folder
- max_img: Maximum number of images
- animation_time: Time to wait before switching to the next image
- transition_time: Animation speed
- brightness: The opacity of the images. From 0 to 1.
// config(img_folder=null, max_img=null, animation_time=null, transition_time=null, brightness=null) config('assets/img', 7, 7000, 1200, 0.3)
This awesome jQuery plugin is developed by aglsoftgithub. For more Advanced Usages, please check the demo page or visit the official website.