Full Screen jQuery Background Slideshow Plugin - Fullscreen Cycler

File Size: 14.1 KB
Views Total: 2263
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Full Screen jQuery Background Slideshow Plugin - Fullscreen Cycler

Fullscreen Cycler is a tiny jQuery plugin for creating a fullscreen background image slideshow that cycles through an array of background images defined in the javascript.

See also:

How to use it:

1. Include the jQuery library and jQuery fullscreen cycler plugin at the bottom of the page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="jquery.fullscreenCycler.js"></script>

2. Create an blank container at the top of your document's body .

<div id="demo"></div>

3. Initialize the plugin and change the sources of images to yours.

<script language="javascript" type="text/javascript">
function($) {
var i = new Array("1.jpg","2.jpg","3.jpg");

$('#fsCycler').fullscreenSlider({
images: i
});
})(jQuery);
</script>

4. Available options.

<script language="javascript" type="text/javascript">
function($) {
$('#fsCycler').fullscreenSlider({
speed: 6, // The time (in seconds) spent displaying each image (you can use decimals to get more exact times on the cycles).
transitionSpeed: 2, // The time (in seconds) spent fading between images
maxCycles: 0, // Max number of cycles before going back to the first image
backgroundColor: "transparent", // The background color that will be shown before the first image is shown
transition: "fade", // slide or fade
images: new Array()
});
})(jQuery);
</script>

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