<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css'>
<div class="container">
<div class="row">
<div id="owl-example" class="owl-carousel">
<div><img src="//placehold.it/300x300/936/c69/?text=1" alt=""></div>
<div><img src="//placehold.it/300x300/693/9c6/?text=2" alt=""></div>
<div><img src="//placehold.it/300x300/369/69c/?text=3" alt=""></div>
<div><img src="//placehold.it/300x300/c33/f66/?text=4" alt=""></div>
<div><img src="//placehold.it/300x300/099/3cc/?text=5" alt=""></div>
<div><img src="//placehold.it/300x300/f93/fc6/?text=6" alt=""></div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$("#owl-example").owlCarousel({
itemsDesktop : [1499,4],
itemsDesktopSmall : [1199,3],
itemsTablet : [899,2],
itemsMobile : [599,1],
navigation : true,
navigationText : ['<span class="fa-stack"><i class="fa fa-circle fa-stack-1x"></i><i class="fa fa-chevron-circle-left fa-stack-1x fa-inverse"></i></span>','<span class="fa-stack"><i class="fa fa-circle fa-stack-1x"></i><i class="fa fa-chevron-circle-right fa-stack-1x fa-inverse"></i></span>'],
});
});
</script>
