Basic
1
2
3
$(function(){
$(".basic").carousel();
});
Fade - inline
1
2
3
$(function(){
$(".basic").carousel();
});
data-carousel-options='{"single":true}'
AutoAdvance and infinite
1
2
3
$(".time").carousel({
autoAdvance : true,
autoTime : 3000,
infinite : true
});
Show - inline
Paged
1
2
3
4
5
6
$(".show").carousel();
data-carousel-options='{"paged":true,"show":3}'
Uneven
1
2
3
4
5
6
$(".show").carousel();
data-carousel-options='{"show":3}'
Responsive counts
$(".responsive").carousel({
show: {
"600px" : 2,
"900px" : 3
}
});
Custom controls
1
2
3
$(".custom").carousel({
customClass : "controls",
labels: {
"next" : "Next",
"previous" : "Prev"
}
});
Custom Previous/Next
1
2
3
$(".custom2").carousel({
customClass : "controls",
controls: {
"next" : ".custom_next",
"previous" : ".custom_previous"
}
});
<button class="custom_previous">Previous</button>
<button class="custom_next">Next</button>