responsiveCarousel

A simple responsive carousel plugin for jQuery.

This plugin defaults to 3 responsive breakpoints; < 481, < 768 and a default desktop size.

View a demo here

##Usage

To use this plugin, simply incude after jquery, and use the following HTML/CSS/JS Markup:

###JS

$(document).ready(function() {
	$('#carousel').responsiveCarousel();
});

###JS Options

You can pass in an object of options for the following parameters:

Parameter	Values
carousel_item_width_default	(decimal) for the % width of the container each carousel items consumes by default (desktop) [5 items visible]
carousel_item_padding_default	(decimal) for the % padding of the container each carousel items consumes by default (desktop)
carousel_item_width_481	(decimal) for the % width of the container each carousel items consumes when the window is < 481px [2 items visible]
carousel_item_padding_481	(decimal) for the % padding of the container each carousel items consumes when the window is < 481px
carousel_item_width_768	(decimal) the % width of the container each carousel items consumes when the window is < 768px > 481px [3 items visible]
carousel_item_padding_768	(decimal) for the % padding of the container each carousel items consumes when the window is < 768px > 481px

###CSS

#carousel { height: auto; }
#carousel ul { list-style: none; padding: 0; margin: 0; }
#carousel li { margin: 0; padding: 0; float: left; display: block; }
#carousel img { width: 100% !important; height: auto !important; }
#carousel .nav { display: block; width: 4%; height: 100%; float: left; }
#carousel .carousel_items_holder { width:92%; overflow: hidden; float: left;  height: 100%; position: relative; }
#carousel .carousel_items { position: absolute; }

###HTML

<div id="carousel">
	<a class="nav prev" href="#">prev</a>
	
	<div class="carousel_items_holder">
	  	<ul class="carousel_items">
	  		<li><a href="#"><img src="/path/to/img1.png" /></a></li>
	  		<li><a href="#"><img src="/path/to/img2.png" /></a></li>
	  		<li><a href="#"><img src="/path/to/img3.png" /></a></li>
	  		<li><a href="#"><img src="/path/to/img4.png" /></a></li>
	  		<li><a href="#"><img src="/path/to/img5.png" /></a></li>
	  		<li><a href="#"><img src="/path/to/img6.png" /></a></li>
	  		<li><a href="#"><img src="/path/to/img7.png" /></a></li>
	  	</ul>
	</div>
	
	<a class="nav next" href="#">next</a>
</div>