Background Image Carousel

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").

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.

• denizli escort
• denizli escort
• didim escort
• düzce escort
• edirne escort
• edirne escort
• edremit escort

Source: dynamicdrive.com

1. INCLUDE JS FILES

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

<script src="bgcarousel.js" type="text/javascript">

2. HTML

<div id="mybgcarousel" class="bgcarousel"></div>

3. JAVASCRIPT

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, a knife that cuts through the chill, crisp air.'], //["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)
});

4. CSS

#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;
}

5. OPTIONS