<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/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://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js "></script> <div id="owl-demo" class="owl-carousel owl-theme"> <div class="item"> <img src="https://images.pexels.com/photos/1020317/pexels-photo-1020317.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"> <div class="caption">Caption 1</div> </div> <div class="item"> <img src="https://images.pexels.com/photos/1037996/pexels-photo-1037996.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"> <div class="caption">Caption 2</div> </div> <div class="item"> <img src="https://images.pexels.com/photos/1038674/pexels-photo-1038674.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"> <div class="caption">Caption 3</div> </div> <div class="item"> <img src="https://images.pexels.com/photos/207301/pexels-photo-207301.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"> <div class="caption">Caption 4</div> </div> <div class="item"> <img src="https://images.pexels.com/photos/982104/pexels-photo-982104.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"> <div class="caption">Caption 5</div> </div> <div class="item"> <img src="https://images.pexels.com/photos/924824/pexels-photo-924824.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"> <div class="caption">Caption 6</div> </div> </div>

#owl-demo .item img{ display: block; width: 100%; height: 300px; }

$(document).ready(function() { $("#owl-demo").owlCarousel({ navigation : true, // Show next and prev buttons slideSpeed : 300, paginationSpeed : 400, singleItem:true // "singleItem:true" is a shortcut for: // items : 1, // itemsDesktop : false, // itemsDesktopSmall : false, // itemsTablet: false, // itemsMobile : false }); });