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

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:
- Dynamic Slideshow Background Plugin - backstretch
- jQuery Fullscreen Background Slideshow - MaxImage
- Fullscreen Background Slideshow with Audio
- Animated Fullscreen Background Image Slideshow
- Amazing Background & Slideshow Plugin - Vegas
- Simple jQuery Plugin For Fullscreen Background Slideshow - Blicker
- jQuery Background Slideshow Plugin with Autoplay Functionality
- Lightweight jQuery Background Slideshow Plugin - BgSwitcher
- jQuery Fullscreen Background Slider Plugin - screenslider
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.