jQuery Plugin For Responsive Full Screen Image Slider - bgswitcher

bgswitcher is a lightweight and responsive jQuery plugin for creating full screen image slider with autoplay functionality for your website. Good for used as an animated website background that automatically switches background images.

Related Plugins:

• Simple Fullscreen Image Slideshow Plugin - fullsizable
• Stunning Fullscreen Photo Wall Gallery
• jQuery Fullscreen Background Slideshow - MaxImage
• Fullscreen Background Slideshow with Audio
• Animated Fullscreen Background Image Slideshow
• Full Screen Slider Plugin - Superslides
• Supersized Fullscreen Slideshow Plugin

How to use it:

1. Include jQuery library and jQuery bgswitcher on your webpage

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery.bcat.bgswitcher.js"></script>

2. The html

<div id="bg-body">
</div>

3. The CSS

#bg-body {
    background: none repeat scroll 0 0 #D2D2D0;
    height: 200%;
    left: -50%;
    position: fixed;
    top: -50%;
    width: 200%;
}
#bg-body img {
    bottom: 0;
    left: 0;
    margin: auto;
    min-height: 50%;
    min-width: 50%;
    position: absolute;
    right: 0;
    top: 0;
}

4. The javascript

<script type="text/javascript">
var srcBgArray = ["./images/img-slider-1.jpg","./images/img-slider-2.jpg","./images/img-slider-3.jpg","./images/img-slider-4.jpg"];

$(document).ready(function() {
  $('#bg-body').bcatBGSwitcher({
    urls: srcBgArray,
    alt: 'Full screen background image'
  });
});
</script>

5. Options and defaults.

urls: [], // urls array, should contain at least one image url
// Instead of strings this array can also contain objects with custom data,
// in this case each object must contain an src property with image url
startIndex: 0, // first image loaded
autoplay: true, // change image every [timeout] ms
timeout: 12000, // time between image changes
alt: 'Picture', // alt for consistency
speed: 1000, // animation speed        
links: false, // generate a link for each image
prevnext: false, // generate previous and next links
fadeFirst: true, // fade in first image
preserveState: false, // save state to cookie, requires jQuery Cookie Plugin (https://github.com/carhartl/jquery-cookie)
cookie: 'bcatBGSwitcher', // name of the cookie if state saving is enabled

// callback after first image is loaded, "this" variable contains the image element
onFirstImageLoad: function() {
},

/**
 * Callback after init function is done
 *
 * "this" variable contains plugin element
 * @param options - plugin options object
 * @param instance - plugin instance object
 */
onInitComplete: function(options, instance) {
},
/**
 * Callback on generation of each navigation link
 *
 * "this" variable contains plugin instance object
 * @param $link - jQuery object with the current link
 * @param index - current urls array index
 * @param url - the url of the specific image
 */
onGenerateEachLink: function($link, index, url) {
},

/**
 * Callback on generation of each image
 * only called if objects instead of strings passed in urls array
 *
 * "this" variable contains plugin instance object
 * @param $html - jQuery object with the generated image html
 * @param data - data object for the current image (passed in urls array)
 *
 * @returns desired custom HTML to show instead of plain image
 */
onGenerateEachImage: function($html, data) {
    return $html;
}

Change Logs:

2016-12-03

• v2.2.1: bugfix

2015-08-27

• Added extra content support as a new version

2014-09-27

• Added new options.

v1.3.2 (2014-05-07)

• Added prevnext option and fixed few bugs related to using prevnext and links options simultaneously. 
• Both navigation and prev / next links are now enabled in demo, all generated elements moved into the element plugin is called from.

v1.2.0 (2013-10-02)

• Added new option to show the navigation links.

v1.1.0 (2013-06-04)

• Added support for multiple instances per page

---

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