<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <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>

.owl-buttons { display: none; } .owl-carousel:hover .owl-buttons { display: block; } .owl-item { text-align: center; } .owl-theme .owl-controls .owl-buttons div { background: transparent; color: #869791; font-size: 40px; line-height: 300px; margin: 0; padding: 0 60px; position: absolute; top: 0; } .owl-theme .owl-controls .owl-buttons .owl-prev { left: 0; padding-left: 20px; } .owl-theme .owl-controls .owl-buttons .owl-next { right: 0; padding-right: 20px; }

<script src='https://code.jquery.com/jquery-1.12.4.min.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js'></script>