<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> <!------ Include the above in your HEAD tag ----------> <section class="banner"> <div id="myCarousels" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#myCarousels" data-slide-to="0" class="active"></li> <li data-target="#myCarousels" data-slide-to="1"></li> <li data-target="#myCarousels" data-slide-to="2"></li> <li data-target="#myCarousels" data-slide-to="3"></li> <li data-target="#myCarousels" data-slide-to="4"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <img src="images/Mobile-Aplication-Development.jpg" alt="Los Angeles" style="width:100%;"> </div> <div class="item"> <img src="images/Digital-Marketing-Service.png" alt="Chicago" style="width:100%;"> </div> <div class="item"> <img src="images/We-Design-Development.jpg" alt="New york" style="width:100%;"> </div> <div class="item"> <img src="images/Corporate-Invitation-Branding.jpg" alt="New york" style="width:100%;"> </div> <div class="item"> <img src="images/Mobile-Aplication-Development.jpg" alt="New york" style="width:100%;"> </div> </div> <!-- Left and right controls --> <a class="left carousel-control" href="#myCarousels" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousels" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> <span class="sr-only">Next</span> </a> </div> </section>

<script> var $item = $('.carousel .item'); var $wHeight = $(window).height(); $item.eq(0).addClass('active'); $item.height($wHeight); $item.addClass('full-screen'); $('.carousel img').each(function() { var $src = $(this).attr('src'); var $color = $(this).attr('data-color'); $(this).parent().css({ 'background-image' : 'url(' + $src + ')', 'background-color' : $color }); $(this).remove(); }); $(window).on('resize', function (){ $wHeight = $(window).height(); $item.height($wHeight); }); $('.carousel').carousel({ interval: 6000, pause: "false" }); </script>