<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 ----------> <h5>Pedro pica piedra</h5> <div class="container"> <!-- main slider carousel --> <div class="row"> <div class="col-lg-8 offset-lg-2" id="slider"> <div id="myCarousel" class="carousel slide"> <!-- main slider carousel items --> <div class="carousel-inner"> <div class="active item carousel-item" data-slide-number="0"> <img src="http://placehold.it/1200x480&text=one" class="img-fluid"> </div> <div class="item carousel-item" data-slide-number="1"> <img src="http://placehold.it/1200x480/888/FFF" class="img-fluid"> </div> <div class="item carousel-item" data-slide-number="2"> <img src="http://placehold.it/1200x480&text=three" class="img-fluid"> </div> <div class="item carousel-item" data-slide-number="3"> <img src="http://placehold.it/1200x480&text=four" class="img-fluid"> </div> <div class="item carousel-item" data-slide-number="4"> <img src="http://placehold.it/1200x480&text=five" class="img-fluid"> </div> <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> <!-- main slider carousel nav controls --> <ul class="carousel-indicators list-inline"> <li class="list-inline-item active"> <a id="carousel-selector-0" class="selected" data-slide-to="0" data-target="#myCarousel"> <img src="http://placehold.it/80x60&text=one" class="img-fluid"> </a> </li> <li class="list-inline-item"> <a id="carousel-selector-1" data-slide-to="1" data-target="#myCarousel"> <img src="http://placehold.it/80x60&text=two" class="img-fluid"> </a> </li> <li class="list-inline-item"> <a id="carousel-selector-2" data-slide-to="2" data-target="#myCarousel"> <img src="http://placehold.it/80x60&text=three" class="img-fluid"> </a> </li> <li class="list-inline-item"> <a id="carousel-selector-3" data-slide-to="3" data-target="#myCarousel"> <img src="http://placehold.it/80x60&text=four" class="img-fluid"> </a> </li> <li class="list-inline-item"> <a id="carousel-selector-4" data-slide-to="4" data-target="#myCarousel"> <img src="http://placehold.it/80x60&text=five" class="img-fluid"> </a> </li> </ul> </div> </div> </div> <!--/main slider carousel--> </div>

#myCarousel .list-inline { padding: 10px; white-space:nowrap; overflow-x:auto; } #myCarousel .carousel-indicators { position: static; left: initial; width: initial; margin-left: initial; } #myCarousel .carousel-indicators > li { width: initial; height: initial; text-indent: initial; } #myCarousel .carousel-indicators > li.active img { opacity: 0.7; padding: 5px; }