Minimal Background Carousel/Slideshow Plugin - jQuery Live Background

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:

• 10 Best Background Slideshows In JavaScript Or Pure CSS

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.