Basic

<div class="carousel">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>
$(".carousel").carousel();

Paged

1
2
3
4
5
<div class="carousel">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>
$(".carousel").carousel({
	paged: true,
	show: 2
});

Uneven Counts

1
2
3
4
5
<div class="carousel">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>
$(".carousel").carousel({
	show: 3
});

Infinite

1
2
3
4
5
<div class="carousel">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>
$(".carousel").carousel({
	infinite: true
});

No Controls

1
2
3
4
5
<div class="carousel">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>
$(".carousel").carousel({
	controls: false,
	pagination: false
});

Enable at Breakpoint

1
2
<div class="carousel">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>
$(".carousel").carousel({
	minWidth: "740px"
});

Responsive Counts

1
2
3
4
5
<div class="carousel">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>
$(".carousel").carousel({
	show: {
		"740px": 2,
		"980px": 3,
		"1220px": 1
	}
});

Links

<div class="carousel">
	<a href="1.jpg">1</a>
	<a href="2.jpg">2</a>
	<a href="3.jpg">3</a>
	<a href="4.jpg">4</a>
	<a href="5.jpg">5</a>
</div>
$(".carousel").carousel({
	show: 3
});

Right to Left

1
2
3
4
5
<div class="carousel">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>
$(".carousel").carousel({
	rtl: true
});

Auto Height

1
2
3
4
5
<div class="carousel">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>
$(".carousel").carousel({
	autoHeight: true
});

Uneven Widths

1
2
3
4
5
<div class="carousel">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>
$(".carousel").carousel({
	matchWidth: false
});

Custom Controls

1
2
3
4
5
<div class="carousel">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

<div class="controls">
	<button class="previous">Previous</button>
	<button class="next">Next</button>
</div>

<div class="pagination"></div>
$(".carousel").carousel({
	controls: {
		"contain": ".controls",
		"previous": ".previous",
		"next": ".next"
	},
	pagination: ".pagination"
});

Linked

1
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6
7
8
9
10
<div class="carousel_1 linked" data-carousel-linked=".linked">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

<div class="carousel_2 linked" data-carousel-linked=".linked">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>
$(".carousel_1").carousel();

$(".carousel_2").carousel({
	rtl: true
});

Controller

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="carousel_1">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

<div class="carousel_2" data-carousel-controller-for=".carousel_1">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>
$(".carousel_1").carousel({
	pagination: false
});

$(".carousel_2").carousel({
	controls: false,
	pagination: false,
	show: 5
});

Single

1
2
3
4
5
<div class="carousel">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>
$(".carousel").carousel({
	single: true
});

Single - Fade

1
2
3
4
5
<div class="carousel">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>
$(".carousel").carousel({
	single: true
});
.carousel .fs-carousel-item {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0s linear, visibility 0s linear;
	transition-delay: 0.25s;
}

.carousel .fs-carousel-item.fs-carousel-visible {
	opacity: 1;
	visibility: visible;
	transition-duration: 0.25s;
	transition-delay: 0s;
}

Single - Right to Left

1
2
3
4
5
<div class="carousel">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>
$(".carousel").carousel({
	single: true,
	rtl: true
});

No Theme

1
2
3
4
5
<div class="carousel">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>
$(".carousel").carousel({
	theme: ""
});