jQuery Carousel Plugin

General

Responsive resizing on window resize (debounced, don't worry), height adapts to content
Swipe-enabled for touch devices
Accessible navigation elements (use your keyboard)
Circular mode without cloning elements (they are shifted around instead)

Optional features

Adapt the height based on currently visible slides: Example
Add spacing between slides ("gutter"): Example
Have multiple visible slides with "grouped handles": Example
Sync multiple carousels: Example

See GitHub repo for all available options.

Word of caution: If you don't need the features listed above, this plugin might be overkill and something like Swipe might serve you better.

Initialization

Default settings

HTML

<div class="carousel" id="carousel-01">
	<div class="carousel-frame">
		<ul class="carousel-slider">
			<li class="carousel-slide">1</li>
			<li class="carousel-slide">2</li>
			<li class="carousel-slide">3<br />Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</li>
			<li class="carousel-slide">4</li>
			<li class="carousel-slide">5</li>
		</ul>
	</div>
</div>

JavaScript

$('#carousel-01').carousel();

CSS

/* Default (css/jquery.carousel.css) */

Custom settings as function parameter (example: circular mode)

HTML

<div class="carousel" id="carousel-02">
	<div class="carousel-frame">
		<ul class="carousel-slider">
			<li class="carousel-slide">1</li>
			<li class="carousel-slide">2</li>
			<li class="carousel-slide">3<br />Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</li>
			<li class="carousel-slide">4</li>
			<li class="carousel-slide">5</li>
		</ul>
	</div>
</div>

JavaScript

$('#carousel-02').carousel({
	behavior: {
		circular: true
	}
});

CSS

/* Default (css/jquery.carousel.css) */

Custom settings as data attribute (data-carousel-options) (example: circular mode)

HTML

<div class="carousel" id="carousel-03" data-carousel-options='{"behavior":{"circular":true}}'>
	<div class="carousel-frame">
		<ul class="carousel-slider">
			<li class="carousel-slide">1</li>
			<li class="carousel-slide">2</li>
			<li class="carousel-slide">3<br />Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</li>
			<li class="carousel-slide">4</li>
			<li class="carousel-slide">5</li>
		</ul>
	</div>
</div>

JavaScript

$('#carousel-03').carousel();

CSS

/* Default (css/jquery.carousel.css) */

Navigational elements, layout, behavior

Styled handles, no other navigational elements

HTML

<div class="carousel" id="carousel-04">
	<div class="carousel-frame">
		<ul class="carousel-slider">
			<li class="carousel-slide">1</li>
			<li class="carousel-slide">2</li>
			<li class="carousel-slide">3<br />Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</li>
			<li class="carousel-slide">4</li>
			<li class="carousel-slide">5</li>
		</ul>
	</div>
</div>

JavaScript

$('#carousel-04').carousel({
	elements: {
		prevNext: false,
		counter: false
	}
});

CSS

.carousel-handles {
	margin: 1em 0 0 0;
}

.carousel-handle {
	background: #999;
	border: none;
		   -moz-border-radius: 1em;
		    -ms-border-radius: 1em;
		     -o-border-radius: 1em;
		-webkit-border-radius: 1em;
	border-radius:             1em;
	display: inline-block;
	line-height: 1;
	margin: 0 0.25em;
	padding: 0;
	overflow: hidden;
	text-indent: -100em;
	width: 1em;
}
.carousel-handle:hover,
.carousel-handle:focus,
.carousel-handle:active,
.carousel-handle.is-active {
	background: #333;
}

Styled prev / next button, no other navigational elements

HTML

<div class="carousel" id="carousel-05">
	<div class="carousel-frame">
		<ul class="carousel-slider">
			<li class="carousel-slide">1</li>
			<li class="carousel-slide">2</li>
			<li class="carousel-slide">3<br />Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</li>
			<li class="carousel-slide">4</li>
			<li class="carousel-slide">5</li>
		</ul>
	</div>
</div>

JavaScript

$('#carousel-05').carousel({
	elements: {
		counter: false,
		handles: false
	}
});

CSS

.carousel-container {
	position: relative;
}

/* Prev / next navigation */
.carousel-navs {
	margin: 0;
	position: absolute;
	top: 50%;
	width: 100%;
	z-index: 2;
}
.carousel-nav {
	background: #999;
	border: 1px solid #666;
		   -moz-border-radius: 0.5em;
		    -ms-border-radius: 0.5em;
		     -o-border-radius: 0.5em;
		-webkit-border-radius: 0.5em;
	border-radius:             0.5em;
		   -moz-box-shadow: 0 0 1em #fff;
		    -ms-box-shadow: 0 0 1em #fff;
		     -o-box-shadow: 0 0 1em #fff;
		-webkit-box-shadow: 0 0 1em #fff;
	box-shadow:             0 0 1em #fff;
	height: 3em;
	margin: -1.5em -1.5em 0;
	overflow: hidden;
	position: relative;
	text-indent: -100em;
	width: 3em;
}
.carousel-nav:before {
	content: "»";
	font-family: Georgia;
	font-size: 4em;
	line-height: 1;
	left: 0.1em;
	position: absolute;
	text-indent: 0;
	top: -0.2em;
}
.carousel-nav:first-child:before {
	content: "«";
}
.carousel-nav[disabled] {
	display: none;
}

Multiple slides visible

HTML

<div class="carousel" id="carousel-06-a">
	<div class="carousel-frame">
		<ul class="carousel-slider">
			<li class="carousel-slide">1</li>
			<li class="carousel-slide">2</li>
			<li class="carousel-slide">3<br />Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</li>
			<li class="carousel-slide">4</li>
			<li class="carousel-slide">5</li>
		</ul>
	</div>
</div>

JavaScript

$('#carousel-06-a').carousel({
	layout: {
		visibleSlides: 2
	}
});

CSS

/* Default (css/jquery.carousel.css) */

Slider adapting height based on currently visible slides

HTML

<div class="carousel" id="carousel-06-b">
	<div class="carousel-frame">
		<ul class="carousel-slider">
			<li class="carousel-slide">1</li>
			<li class="carousel-slide">2</li>
			<li class="carousel-slide">3<br />Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</li>
			<li class="carousel-slide">4</li>
			<li class="carousel-slide">5</li>
		</ul>
	</div>
</div>

JavaScript

$('#carousel-06-b').carousel({
	layout: {
		visibleSlides: 2,
		fixedHeight: false
	}
});

CSS

/* Default (css/jquery.carousel.css) */

Vertical slider

HTML

<div class="carousel" id="carousel-06-c">
	<div class="carousel-frame">
		<ul class="carousel-slider">
			<li class="carousel-slide">1</li>
			<li class="carousel-slide">2</li>
			<li class="carousel-slide">3<br />Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</li>
			<li class="carousel-slide">4</li>
			<li class="carousel-slide">5</li>
		</ul>
	</div>
</div>

JavaScript

$('#carousel-06-c').carousel({
	layout: {
		horizontal: false
	}
});

CSS

/* Default (css/jquery.carousel.css) */

Spacing between slides (gutter)

HTML

<div class="carousel" id="carousel-06-d">
	<div class="carousel-frame">
		<ul class="carousel-slider">
			<li class="carousel-slide">1</li>
			<li class="carousel-slide">2</li>
			<li class="carousel-slide">3<br />Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</li>
			<li class="carousel-slide">4</li>
			<li class="carousel-slide">5</li>
		</ul>
	</div>
</div>

JavaScript

$('#carousel-06-d').carousel({
	layout: {
		gutter: 10
	}
});

CSS

.carousel-slide { background: gray; }

Synced sliders

HTML

<div class="carousel" id="carousel-11-a">
	<div class="carousel-frame">
		<ul class="carousel-slider">
			<li class="carousel-slide">1</li>
			<li class="carousel-slide">2</li>
			<li class="carousel-slide">3<br />Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</li>
			<li class="carousel-slide">4</li>
			<li class="carousel-slide">5</li>
		</ul>
	</div>
</div>

<div class="carousel" id="carousel-11-b">
	<div class="carousel-frame">
		<ul class="carousel-slider">
			<li class="carousel-slide">1</li>
			<li class="carousel-slide">2</li>
			<li class="carousel-slide">3<br />Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</li>
			<li class="carousel-slide">4</li>
			<li class="carousel-slide">5</li>
		</ul>
	</div>
</div>

JavaScript

$('#carousel-11-a').carousel({
	$syncedCarousels: $('#carousel-11-b')
});

$('#carousel-11-b').carousel({
	$syncedCarousels: $('#carousel-11-a')
});

CSS

/* Default (css/jquery.carousel.css) */

Methods

Custom prev / next buttons

HTML

<div class="carousel" id="carousel-07">
	<div class="carousel-frame">
		<ul class="carousel-slider">
			<li class="carousel-slide">1</li>
			<li class="carousel-slide">2</li>
			<li class="carousel-slide">3<br />Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</li>
			<li class="carousel-slide">4</li>
			<li class="carousel-slide">5</li>
		</ul>
	</div>

	<button id="prev">prev</button>
	<button id="next">next</button>
</div>

JavaScript

/* Init carousel */
$('#carousel-07').carousel({
	elements: {
		prevNext: false,
		handles: false,
		counter: false
	}
});

/* Bind event on custom buttons */
$('#prev').on('click', function(){
	$('#carousel-07').carousel('prev');
});
$('#next').on('click', function(){
	$('#carousel-07').carousel('next');
});

/* Alternative */
/*
var carousel = new Carousel($('#carousel-07'), {
	elements: {
		prevNext: false,
		handles: false,
		counter: false
	}
});
carousel.init();

$('#prev').on('click', function(){
	carousel.prev();
});
$('#next').on('click', function(){
	carousel.next();
});
*/

CSS

/* Default (css/jquery.carousel.css) */

Update settings

HTML

<div class="carousel" id="carousel-08">
	<div class="carousel-frame">
		<ul class="carousel-slider">
			<li class="carousel-slide">1</li>
			<li class="carousel-slide">2</li>
			<li class="carousel-slide">3<br />Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</li>
			<li class="carousel-slide">4</li>
			<li class="carousel-slide">5</li>
		</ul>
	</div>
</div>

JavaScript

/* Init carousel */
var carousel = new Carousel($('#carousel-08'));
carousel.init();

/* Clone third slide */
var slide = carousel.$dom.slides.eq(2);
slide.clone().insertAfter(slide);

/* Change settings */
carousel.update({
	animation: {
		step: 2 /* Move two slides on each slide event */
	},
	events: {
		stop: function(i){
			console.log('Visible slides: ' + (i+1) + ' & ' + (i+2)); /* Slide callback */
		}
	},
	layout: {
		visibleSlides: 2 /* Show two slides at the same time */
	}
});

CSS

/* Default (css/jquery.carousel.css) */

Destroy

HTML

<div class="carousel" id="carousel-09">
	<div class="carousel-frame">
		<ul class="carousel-slider">
			<li class="carousel-slide">1</li>
			<li class="carousel-slide">2</li>
			<li class="carousel-slide">3<br />Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</li>
			<li class="carousel-slide">4</li>
			<li class="carousel-slide">5</li>
		</ul>
	</div>
</div>

JavaScript

/* Init carousel */
var carousel = new Carousel($('#carousel-09'));
carousel.init();

/* Destroy */
carousel.destroy();

CSS

/* Default (css/jquery.carousel.css) */