<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 ----------> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="//cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" rel="stylesheet" /> <script src="//cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script> <div class="owl-carousel"> <div class="item"><img src="//placehold.it/350x150&text=1" /></div> <div class="item"><img src="//placehold.it/350x150&text=2" /></div> <div class="item"><img src="//placehold.it/350x150&text=3" /></div> <div class="item"><img src="//placehold.it/350x150&text=4" /></div> <div class="item"><img src="//placehold.it/350x150&text=5" /></div> <div class="item"><img src="//placehold.it/350x150&text=6" /></div> <div class="item"><img src="//placehold.it/350x150&text=7" /></div> <div class="item"><img src="//placehold.it/350x150&text=8" /></div> </div>

$(function() { $('.owl-carousel').owlCarousel({ margin: 10, loop: true, items: 2.5, stagePadding: 10 }); });