Background Image Carousel v1.1
June 26th, 14': Flexible carousel dimensions now supported, swipe to navigate added, plus other minor enhancements.
Description: Background Carousel script is an
image carousel that displays its images as background images. The advantage of
this is the ability to easily modify the way each image is presented per CSS's
background
attribute. Use CSS's background-position
property to easily center each image inside the container, or CSS3's
background-size
property to intelligently scale the image so it fits the
container perfectly (using the values "contain
" or "cover
"), for example.
Here's a list of the script's main features:
- Displays images one at a time with no breaks between the first and last slide (and visa versa).
- Displays each image as a background image, affording you all the display
options possible using CSS's
background
property. - The reel can display the slides horizontally (left to right), or vertically (top down).
- Carousel can be set to automatically rotate the images and optionally stopping after x cycles.
- Persistence of last viewed slide supported, so when the user reloads the page, the carousel resumes from the last slide.
- Carousel automatically pauses onMouseover.
Demo: Look above you!
Step 1: Add the following SCRIPT to the <head> section of your page:
The code references the following files, which you should download below:
- bgcarousel.js
- jquery.velocity.min.js (v0.2.1) (Github)
- jquery.touchSwipe.min.js (v1.6.6) (Github) (Optional file to auto enable swipe navigation).
Step 2: Add a blank DIV with a unique ID and CSS class defined where you wish the carousel to appear. The script will populate this DIV with the carousel.
That's it for installation! Lets look at the available customization options for each instance of Background Image Carousel on your page.
Initialization of the script
To initialize the script to display an instance of Background
Image Carousel, call new
bgcarousel()
in the HEAD section of your page:
var uniquevariable=new bgcarousel(options)
Where "uniquevariable
" should be an arbitrary but unique variable
(for each instance of Background Carousel), and options is an object literal
containing the desired settings. For example:
var firstbgcarousel=new bgCarousel({
wrapperid: 'mybgcarousel', //ID of blank DIV on page to house carousel
imagearray: [
['autumnpark.jpg', '<h2>Autumn Day</h2>The sun peaks through the
trees.'], // ["image_path", "optional description"]
['chime.jpg', '<h2>Wind Chime</h2>The bellweather of the sky, the chime
speaks of impending turmoil.'],
['girlportrait.jpg', 'The scent of spring invigorates her as she inhales
whilst the warm breeze brings a wave of tranquility.'],
['redbench.jpg', 'Alone and Lonliness- Peace and Inner Struggle'] //<--no
trailing comma after very last image element!
],
displaymode: {type:'auto', pause:3000, cycles:2, stoponclick:false,
pauseonmouseover:true},
navbuttons: ['left.gif', 'right.gif', 'up.gif', 'down.gif'], // path to
nav images
activeslideclass: 'selectedslide', // CSS class that gets added to
currently shown DIV slide
orientation: 'h', //Valid values: "h" or "v"
persist: true, //remember last viewed slide and recall within same
session?
slideduration: 500 //transition duration (milliseconds)
})
Here's an explanation of each setting:
options | Description |
wrapperid Required |
The ID of an empty DIV container on your page
that will show a Background Image Carousel. The corresponding DIV on the
page should carry a matching unique ID and a specific CSS class: <div id="mybgcarousel" class="bgcarousel"></div> |
imagearray Required |
An array containing the images you wish to
show. Each array element contains 2 parts: ["path_to_image", "optional textual description"] |
displaymode defaults to {type:'auto', pause:2000, stoponclick:false, cycles:2, pauseonmouseover:true} |
Sets the primary attributes of your
carousel, from whether this is an automatic or manual carousel, the
pause between slides, the number of cycles before the carouselstops
in automatic mode, to whether the carouselshould pause onMouseover: {type:'auto', pause:3000, cycles:2, stoponclick:false, pauseonmouseover:true}, The " The " The " |
navbuttons Required |
An array pointing to the paths of the 4
images that make up the navigational buttons that get automatically
added to the carousel, in that order: ['left.gif', 'right.gif', 'up.gif', 'down.gif'], // path to nav images |
activeslideclass Defaults to "selectedslide" |
An arbitrary CSS class that gets added to the currently shown slide's DIV (in addition to the shared "slide" class). This class is removed when the slide is no longer the active one. It lets you apply additional styling via CSS to the currently shown slide. |
orientation Defaults to "h" |
Set to either "h " or "v "
to cause the carousel to scroll the slides from left to right
(horizontally), or up down (vertically) instead. |
persist Defaults to true |
Boolean variable that decides whether the slideshow should remember and recall the last viewed slide within a browser session when the page is reloaded. |
slideduration Defaults to 500 |
The duration of the sliding effect when transitioning from one image to the next, in milliseconds. |
Additional customization via the CSS of the script
Some important aspects of the carousel must be specified via the
CSS of the script. The "bgcarousel
" and "slide
"
selectors contain properties you'll want to customize:
#mybgcarousel{ /* CSS for specific
carousel container called #mybgcarousel. */
width:100%;
height:700px;
}
/* ######### Shared CSS for various parts of carousel (in the event of multiple
carousels) ######### */
div.bgcarousel{ /* shared CSS for main carousel container */
background: black url(ajaxload.gif) center center no-repeat; /* loading gif
while caoursel is loading */
}
div.bgcarousel div.slide{ /* CSS for each image's DIV container within main
container */
background-color: black;
background-position: center center; /* center image within
carousel */
background-repeat: no-repeat;
background-size: cover; /* CSS3 property to scale image
within container? "cover" or "contain" */
color: black;
}
"
"
Pay special attention to the parts in red, which control everything from the path of the loading gif, the dimensions of the carousel, to how the background image is positioned within the carousel.