<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.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 href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css" rel="stylesheet" type="text/css"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css" rel="stylesheet" type="text/css"/> <section id="slider"> <div class="container-fluid"> <div class="slider-inner col-xs-12 col-sm-12 col-md-12 col-lg-12"> <h1>FIRST</h1> <div id="owl-demo" class="owl-carousel owl-theme" style="margin-top: 20px;"> <div class="item"> <img src="http://www.waypoint.com/wp-content/uploads/2016/12/WRG-ReputationSafeguardginHero-images-1366x400.jpg" alt="sliderimg1"> </div> <div class="item"> <img src="http://www.waypoint.com/wp-content/uploads/2016/07/WRG-Hero-images-1366x400-Home.png" alt="sliderimg2"> </div> <div class="item"> <img src="http://www.waypoint.com/wp-content/uploads/2016/07/WRG-Hero-images-1366x400-Industry.png" alt="sliderimg3"> </div> <div class="item"> <img src="http://www.waypoint.com/wp-content/uploads/2016/06/WRG-Hero-images-1366x400-Solutions.png" alt="sliderimg3"> </div> </div> </div> <div class="slider-inner col-xs-12 col-sm-12 col-md-12 col-lg-12"> <h1>SECOND</h1> <div id="owl-demo" class="owl-carousel owl-theme" style="margin-top: 20px;"> <div class="item"> <img src="http://www.waypoint.com/wp-content/uploads/2016/06/WRG-Hero-images-1366x400-WhyWaypoint.png" alt="sliderimg1"> </div> <div class="item"> <img src="http://www.waypoint.com/wp-content/uploads/2016/07/WRG-Hero-images-1366x400-News.png" alt="sliderimg2"> </div> <div class="item"> <img src="http://www.waypoint.com/wp-content/uploads/2016/10/WRG-Hero-images-1366x400-eBook-Customer-Service.png" alt="sliderimg3"> </div> <div class="item"> <img src="https://www.linkfinancial.eu/wp-content/uploads/2016/07/LF-Spain-Web-Images-Building-3-hires-1366x400.jpg" alt="sliderimg3"> </div> </div> </div> <div class="slider-inner col-xs-12 col-sm-12 col-md-12 col-lg-12"> <h1>Third</h1> <div id="owl-demo" class="owl-carousel owl-theme" style="margin-top: 20px;"> <div class="item"> <img src="http://www.waypoint.com/wp-content/uploads/2016/12/WRG-ReputationSafeguardginHero-images-1366x400.jpg" alt="sliderimg1"> </div> <div class="item"> <img src="http://www.waypoint.com/wp-content/uploads/2016/07/WRG-Hero-images-1366x400-Home.png" alt="sliderimg2"> </div> <div class="item"> <img src="http://www.waypoint.com/wp-content/uploads/2016/07/WRG-Hero-images-1366x400-Industry.png" alt="sliderimg3"> </div> <div class="item"> <img src="http://www.waypoint.com/wp-content/uploads/2016/06/WRG-Hero-images-1366x400-Solutions.png" alt="sliderimg3"> </div> </div> </div> <div class="slider-inner col-xs-12 col-sm-12 col-md-12 col-lg-12"> <h1>FOURTH</h1> <div id="owl-demo" class="owl-carousel owl-theme" style="margin-top: 20px;"> <div class="item"> <img src="http://www.waypoint.com/wp-content/uploads/2016/06/WRG-Hero-images-1366x400-WhyWaypoint.png" alt="sliderimg1"> </div> <div class="item"> <img src="http://www.waypoint.com/wp-content/uploads/2016/07/WRG-Hero-images-1366x400-News.png" alt="sliderimg2"> </div> <div class="item"> <img src="http://www.waypoint.com/wp-content/uploads/2016/10/WRG-Hero-images-1366x400-eBook-Customer-Service.png" alt="sliderimg3"> </div> <div class="item"> <img src="https://www.linkfinancial.eu/wp-content/uploads/2016/07/LF-Spain-Web-Images-Building-3-hires-1366x400.jpg" alt="sliderimg3"> </div> </div> </div> </div> </section> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js" type="text/javascript"></script>

/*SLIDER SECTION CSS*/ *{ box-sizing: border-box; } body{margin: auto;font-family: calibri;} #slider .container-fluid{ padding: 0 15px; } #slider .slider-inner{ padding: 0; } .slider-inner .item img{ display: block; width: 100%; height: auto; } .slider-inner h1{ color: purple; }

$(function () { var count = 0; $('.owl-carousel').each(function () { $(this).attr('id', 'owl-demo' + count); $('#owl-demo' + count).owlCarousel({ navigation: true, slideSpeed: 300, pagination: true, singleItem: true, autoPlay: 2000, autoHeight: true }); count++; }); });