jQuery responsive carousel

Version: 1.0
License: Creative Commons License
Price: Free
# Downloads: 380
Compatible with: IE7, IE8, IE9, IE10, Firefox, Safari, Opera, Chrome

jQuery responsive carousel is a lightweight carousel script that can be used all by itself to showcase images or can be incorporated in larger applications to be used for navigation purposes or other ways that may be found suitable.

Features

  • Responsive – will work on any resolution;
  • Extensible – use events and functions to implement with existing scripts;
  • CSS styling – modify the aspect directly from stylesheets;
  • jQuery based – can be used on any WordPress installation.

Usage

As with any other script, first thing to do is placing of all files into your page head section.

<!DOCTYPE html>
<html lang="en-US">
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<script language="javascript" type="text/javascript" src="jquery.js"></script>
<script language="javascript" type="text/javascript" src="thumbs-jq.js"></script>
</head>
<!-- rest of page goes below -->

Next, you need to create the HTML for it. In order for the script to work properly, HTML needs to be made of two containers, main container being the mask and the one inside it having the elements that need sliding.

<div class="fa_carousel"> <!-- main container -->
	<ul class="fa_carousel_items"> <!-- items container -->
		<li class="item">
			<a href="#" title=""><img src="thumb.jpg" alt="" /></a>
		</li>
		<!-- more items here -->
	</ul>
</div>

Basic styling for the above HTML:

/* main container */
.fa_carousel{
	display:block;
	position:relative;
	width:500px;
	float:left;
	overflow:hidden;
	padding:0px 5px;
}
	/* items container (the <ul>) */
	.fa_carousel .fa_carousel_items{
		display:block;
		position:relative;
		float:left;
		list-style-type:none;
		margin:0px;
		padding:0px;
		width:5000px;
	}
		/* single item */
		.fa_carousel .fa_carousel_items .item{
			display:block;
			position:relative;
			float:left;
			padding:10px 5px;
			margin:0px;
		}
		/* single item anchor */
		.fa_carousel .fa_carousel_items .item a{
			display:block;
			border:1px #FFF solid;
		}
		/* single item active anchor */
		.fa_carousel .fa_carousel_items .item.active a{
			border:1px #000 solid;
		}
			/* single item image */
			.fa_carousel .fa_carousel_items .item img{
				margin:0px;
				padding:0px;
				display:block;
			}

Please note that the script should be started on window load event and not document ready for best results.

<script language="javascript">
;(function($){
	$( window ).load( function(){
		$( '.fa_carousel' ).CFCarousel();		
	})
})(jQuery);
</script>

Parameters

PropertyDefaultValuesDescription
visibleItems5Number of visible items; will resize the carousel to : number of items * item width
cyclefalsetrue, falseWhen end is reached, if true, it will navigate to the first element when next is clicked.
opacityIdle.7Opacity of items except the one that’s active.
opacityOn1Opacity of active element.
opacityOver.8Opacity of hovered item.
animateNavstruetrue, falseAnimate navigation items (left/right arrow). If true, on mouse out they will be taken out of view.
threshold0A distance in pixels that will be used to make calculations and resize the carousel.
navsobjectAn object containing the CSS classes for forward/back navigation inside the carousel. Default: {'back' : '.nav-back', 'fwd' : '.nav-fwd'}

Events

EventReturnDescription
initnullFired once the plugin initializes and is ready.
changeobjectFires every time when the user navigates between items. Returns the index of the current element into an object: {‘index’ : currentIndex}.
navClickobjectFired every time when the carousel navigation is clicked (forward/back anchors). Returns an object containing the current active index and the direction clicked: {‘index’ : currentIndex, ‘direction’ : 1 or -1}.

Methods

MethodParametersDescription
gotoIndex(int) indexWhen used, it will force the carousel to navigate to the given index and set it active.

Changelog

  • 1.0

    - Initial release

Latest forum discussions