jQuery Plugin For Responsive Full Screen Image Slider - bgswitcher
File Size: | 1.52 MB |
---|---|
Views Total: | 8967 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.