Untitled

<!DOCTYPE html>
<html lang="sp">

<head>
    <meta charset="UTF-8">
    <title> prueba

    </title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

      <!--<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>-->
    <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.9.2/parsley.js"></script>-->
   <style>
        div {
            margin: auto 0;
            text-align: center;
        }

        #carrusel img {
            max-height: 55px;
            margin: 1px;
        }
  body {
    display: inline-block;
    margin: 0px auto;
    text-align: center;

    background: black;
  }
  html {
  text-align: center;
}

    </style>
</head>

<body >
    <img style="width:50%; max-width:500px;"  class="img-responsive" src="images/rimac.png" alt="Rimac">

<!-- IMAGEN EN GRANDE -->
<div class="ga">


    <img class="carrusel" id="imageBig" src="">
    </div>

<!-- FIN IMAGEN EN GRANDE -->
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>

      <div id="carrusel" style="display:  "  >

              <?php

              $images = scandir("./img", SORT_NUMERIC);
              $count = 0;

              foreach ($images as $nombreImage) {

                  //var_dump($nombreImage) ;
                  if (strlen($nombreImage) <=2)continue;


                  echo "<img id='image".$count."' src='./img/".$nombreImage." ' >";

                  $count++;
              }
              ?>


      </div>

<div>
<a style="width: 25px" class="carousel-control-prev" onclick="moveCarrusel(-1);" type="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only"></span>
  </a>


    <a style="width: 25px" class="carousel-control-next" onclick="moveCarrusel(1);" type="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only"></span></a>
</div>
<script>

    let position = 0;

    //MUESTRA LA PRIMERA IMAGEN EN GRANDE
    document.getElementById('imageBig').src = document.getElementById('image0').src;

    // HACE EL MOVIMIENTO DEL CARRUSEL
    function moveCarrusel(step) {

        if (typeof document.getElementById('image' + (position + step)) !== 'undefined') {

            document.getElementById('imageBig').src = document.getElementById('image' + (position + step)).src;

            position = position + step;
        }

    }

</script>


    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

</body>

</html>