Owl Carousel
Touch enabled jQuery plugin that lets you create a beautiful responsive carousel slider. Read the official plugin documentation.
Table of Contents
Examples
Basic
1
2
3
4
5
6
7
8
9
10
11
12
<div class="owl-carousel owl-theme owl-img-responsive">
<div class="item"><h4>1</h4></div>
<div class="item"><h4>2</h4></div>
<div class="item"><h4>3</h4></div>
<div class="item"><h4>4</h4></div>
<div class="item"><h4>5</h4></div>
<div class="item"><h4>6</h4></div>
<div class="item"><h4>7</h4></div>
<div class="item"><h4>8</h4></div>
<div class="item"><h4>9</h4></div>
<div class="item"><h4>10</h4></div>
<div class="item"><h4>11</h4></div>
<div class="item"><h4>12</h4></div>
</div>
$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
nav:true,
responsive:{
0:{
items:1
},
600:{
items:3
},
1000:{
items:5
}
}
})
One Slide
1
2
3
4
5
6
<div class="owl-carousel owl-theme owl-img-responsive">
<div class="item"><h4>1</h4></div>
<div class="item"><h4>2</h4></div>
<div class="item"><h4>3</h4></div>
<div class="item"><h4>4</h4></div>
<div class="item"><h4>5</h4></div>
<div class="item"><h4>6</h4></div>
</div>
$('.owl-carousel').owlCarousel({
nav:true, // Show next and prev buttons
autoplaySpeed:300,
navSpeed:400,
items:1
})
Auto width with loop
1
2
3
4
5
6
7
8
<div class="owl-carousel owl-theme owl-img-responsive">
<div class="item" style="width:250px"><h4>1</h4></div>
<div class="item" style="width:150px"><h4>2</h4></div>
<div class="item" style="width:200px"><h4>3</h4></div>
<div class="item" style="width:125px"><h4>4</h4></div>
<div class="item" style="width:150px"><h4>5</h4></div>
<div class="item" style="width:175px"><h4>6</h4></div>
<div class="item" style="width:250px"><h4>7</h4></div>
<div class="item" style="width:200px"><h4>8</h4></div>
</div>
$('.owl-carousel').owlCarousel({
margin:10,
loop:false,
autoWidth:true,
items: 4
})