<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css"> <div class="owl-carousel owl-theme"> <a class="item"> <img src="https://cdn.pixabay.com/photo/2018/01/14/23/12/nature-3082832__340.jpg"> </a> <a class="item"> <img src="https://cdn.pixabay.com/photo/2018/01/14/23/12/nature-3082832__340.jpg"> </a> <a class="item"> <img src="https://cdn.pixabay.com/photo/2018/01/14/23/12/nature-3082832__340.jpg"> </a> <a class="item"> <img src="https://cdn.pixabay.com/photo/2018/01/14/23/12/nature-3082832__340.jpg"> </a> <a class="item"> <img src="https://cdn.pixabay.com/photo/2018/01/14/23/12/nature-3082832__340.jpg"> </a> <a class="item"> <img src="https://cdn.pixabay.com/photo/2018/01/14/23/12/nature-3082832__340.jpg"> </a> <a class="item"> <img src="https://cdn.pixabay.com/photo/2018/01/14/23/12/nature-3082832__340.jpg"> </a> <a class="item"> <img src="https://cdn.pixabay.com/photo/2018/01/14/23/12/nature-3082832__340.jpg"> </a> <a class="item"> <img src="https://cdn.pixabay.com/photo/2018/01/14/23/12/nature-3082832__340.jpg"> </a> <a class="item"> <img src="https://cdn.pixabay.com/photo/2018/01/14/23/12/nature-3082832__340.jpg"> </a> </div> <script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>

$(document).ready(function() { $('.owl-carousel').owlCarousel({ loop:false, margin:20, responsiveClass:true, nav:true, responsive:{ 0:{ items:2 }, 1000:{ items:3 } } }); });