How to make Owl Carousel
How to make Owl Carousel
by rajnishw3
HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.js"></script>
<div class="owl-carousel owl-theme">
<div class="item">
<img src="http://www.likecool.com/Gear/Pic/Thumbnails/Thumbnails-1.jpg">
</div>
<div class="item">
<img src="http://www.likecool.com/Gear/Pic/Thumbnails/Thumbnails-1.jpg">
</div>
<div class="item">
<img src="http://www.likecool.com/Gear/Pic/Thumbnails/Thumbnails-1.jpg">
</div>
<div class="item">
<img src="http://www.likecool.com/Gear/Pic/Thumbnails/Thumbnails-1.jpg">
</div>
<div class="item">
<img src="http://www.likecool.com/Gear/Pic/Thumbnails/Thumbnails-1.jpg">
</div>
<div class="item">
<img src="http://www.likecool.com/Gear/Pic/Thumbnails/Thumbnails-1.jpg">
</div>
<div class="item">
<img src="http://www.likecool.com/Gear/Pic/Thumbnails/Thumbnails-1.jpg">
</div>
<div class="item">
<img src="http://www.likecool.com/Gear/Pic/Thumbnails/Thumbnails-1.jpg">
</div>
<div class="item">
<img src="http://www.likecool.com/Gear/Pic/Thumbnails/Thumbnails-1.jpg">
</div>
<div class="item">
<img src="http://www.likecool.com/Gear/Pic/Thumbnails/Thumbnails-1.jpg">
</div>
<div class="item">
<img src="http://www.likecool.com/Gear/Pic/Thumbnails/Thumbnails-1.jpg">
</div>
<div class="item">
<img src="http://www.likecool.com/Gear/Pic/Thumbnails/Thumbnails-1.jpg">
</div>
</div>
CSS
.item{
height:200px;
}
.item img{
width:100%;
height:100%;
}
JavaScript
$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
nav:true,
responsive:{
0:{
items:1
},
600:{
items:3
},
1000:{
items:5
}
}
});