How To Use Owl Carousel
CSS Link -
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/
ajax/libs/OwlCarousel2/2.1.3/
assets/owl.carousel.min.css">
HTML Code -
<div class="owl-carousel" id="owlSlider">
<div class="item">
<img src="http://placehold.it/150x150">
</div>
<div class="item">
<img src="http://placehold.it/150x150">
</div>
<div class="item">
<img src="http://placehold.it/150x150">
</div>
<div class="item">
<img src="http://placehold.it/150x150">
</div>
<div class="item">
<img src="http://placehold.it/150x150">
</div>
<div class="item">
<img src="http://placehold.it/150x150">
</div>
<div class="item">
<img src="http://placehold.it/150x150">
</div>
<div class="item">
<img src="http://placehold.it/150x150">
</div>
<div class="item">
<img src="http://placehold.it/150x150">
</div>
<div class="item">
<img src="http://placehold.it/150x150">
</div>
<div class="item">
<img src="http://placehold.it/150x150">
</div>
<div class="item">
<img src="http://placehold.it/150x150">
</div>
</div>
JQUERY or JAVASCRIPT Code -
<script src="https://cdnjs.cloudflare.com/
ajax/libs/jquery/2.2.2/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/
ajax/libs/OwlCarousel2/2.1.3/
owl.carousel.min.js"></script>
<script>
$('#owlSlider').owlCarousel({
loop: true,
margin: 10,
nav: true,
navText: [
"<i class='fa fa-caret-left'></i>",
"<i class='fa fa-caret-right'></i>"
],
autoplay: true,
autoplayHoverPause: true,
responsive: {
0: {
items: 1
},
600: {
items: 3
},
1000: {
items: 4
}
}
})
</script>
YouTube -