|File Size:||259 KB|
|Official Website:||Go to website|
Background Cycle is a simple lightweight jQuery plugin that enables you to cycle through an array of background images within a given container. Also can be used as a responsive fullscreen slideshow with basic fade transition for creating a dynamic background on your website.
How to use it:
2. Create an array of image for the background slideshow.
imageUrls: [ 'res/img/bg1.jpg', 'res/img/bg2.jpg', 'res/img/bg3.jpg' ... ],
3. The settings to custom the background slideshow.
imageUrls: , // an array of strings representing urls to the images to cycle through duration: 5000, // the nr of miliseconds between two fades. fadeSpeed: 1000, // the nr of miliseconds it takes for one image to fade out to another. backgroundSize: SCALING_MODE_NONE specify a value for the css3 property 'background size' or one of the following constants; SCALING_MODE_NONE, SCALING_MODE_STRETCH, SCALING_MODE_COVER, SCALING_MODE_CONTAIN
4. Sizing constants. these determine the value of the CSS property 'background-size' of the selected container
var SCALING_MODE_NONE = 0; //Uses the original image size var SCALING_MODE_STRETCH = 1; //Sets 'background-size' to '100% 100%'. This stretches the background image to fill the container, discarding the images aspect ratio. var SCALING_MODE_COVER = 2; //Sets 'background-size' to 'cover'. This makes the background images fill the entire container while retaining its aspect ratio. var SCALING_MODE_CONTAIN = 3; //Sets 'background-size' to 'contain'. This scales the bakcground image to the largest size such that both its width and its height can fit inside the content area