Minimal Crossfading Background Slideshow Plugin With jQuery - RotateBG

RotateBG is a very small jQuery plugin which allows to fade through an array of background images like a fullscreen slideshow.

Features:

• Preloads an array of full-page background images.
• Cross fades background images at given interval.
• Optionally create a full page loading div that covers page until the first image is loaded.
• No any CSS required.

How to use it:

1. Load both jQuery JavaScript library and the jQuery RotateBG plugin's script at the end of the html document.

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="RotateBG.js"></script>

2. Initialize the background slideshow and specify an array of images for your background. That's it.

$.RotateBG({
  Backgrounds:['img1.png', 'img2.png', 'img3.png'],
});

3. Config the background slideshow with the following options.

$.RotateBG({

    // Array of full page background images.
    Backgrounds:['img1.png', 'img2.png', 'img3.png'],

    // Number of seconds for each image to show
    Interval: 8,

    // An image to show on the loading div
    LoadingImg: "./img/loader.gif",

    // The background color
    LoadingBGColor: "#2A2826",

    // Shuffle background images
    Shuffle: true,

    // A function to execute when the first image is loaded
    onLoaded: function(){ console.log("First image has loaded."); },

    // The speed of the fade. 
    // 0.1 = 10fps
    FadeSpeed: 0.1
    
});

---

This awesome jQuery plugin is developed by Pamblam. For more Advanced Usages, please check the demo page or visit the official website.