Owl Carousel

Touch enabled jQuery plugin that lets you create a beautiful responsive carousel slider. Read the official plugin documentation.

Examples

Basic
								
									<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
								
									<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
								
									<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
	})