Search code examples
javascripttwitter-bootstrapowl-carousel

Carousel not rotating after changing to dynamic script


I have changed my static code for an carousel to an dynamic code. For some reason the carousel is not rotating the images. I have put the website online for viewing: here

  <?php
  $files = glob('img/carousel/*.*');
  shuffle($files);    
  $no_files = count($files);
  ?>

<header>
  <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <?php
        for ($x = 0; $x <= $no_files; $x++)
        {
            echo '<li data-target="#carouselExampleIndicators" data-slide-to="'.$x.'" '; if($x == 0) { echo 'class="active"'; } echo'></li>';
        }
        ?>
    </ol>
    <div class="carousel-inner" role="listbox">

      <?php
      foreach($files as $file)
      {
          echo '<div class="carousel-item active" style="background-image: url('.$file.')">
                <div class="carousel-caption d-none d-md-block">
                </div>
              </div>';
      }
      ?>

    </div>
    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Vorige</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Volgende</span>
    </a>
  </div>
</header>

Solution

  • I have thanks to trincot changed the second loop to:

      <?php
      $y = 0;
      foreach($files as $file)
      {
          $y++;
          echo '<div class="carousel-item'; if($y == 1) { echo ' active'; } echo'" style="background-image: url('.$file.')">
                <div class="carousel-caption d-none d-md-block">
                </div>
              </div>';
      }
      ?>