Dynamic Bootstrap Carrousel

[Gih]

I’m trying to create whiles to print images on bootstrap carousel. I am learning.

I get an array with database urls and I can not do while display the correct image active.

   <?php
            $this_post_id = get_the_ID();
            $urls =get_post_meta($this_post_id,'my-images', true);
            $totalUrls = count($urls);//count urls in array
            $number = 0; 
        ?>      


  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->


  <ol class="carousel-indicators">
    <?php while($number <= $totalUrls){ ?>
    <li data-target="#myCarousel" data-slide-to="<?php echo $number++; ?>"></li>
    <?php } ?>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">

    <?php while($number <= $totalUrls){
     foreach($urls as $url){
        ?>

            <div class="item active">
      <img src="<?php echo $url;?>"  class="img-responsive" />
      <div class="carousel-caption">
        ...
      </div>
    </div>
     <?php} } ?>
 </div>

Thanks

[Archie22is]

Have a look at this simple tutorial using Bootstrap 3: https://archie.makuwa.co.za/blog/bootstrap3-carousel-wordpress-loop/

If that link is not visible, here is the code:

<!-- Define the loop -->
<?php $slideloop = new WP_Query( array( 'post_type' => 'slides', 'posts_per_page' => -1 ) ); ?>
<?php $i=1; ?>
 
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    </ol>
 
    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
 
        <?php while ( $slideloop->have_posts() ) : $slideloop->the_post(); ?>
            <?php the_content(); ?>
 
            <div class="item <?php if ($i == 1) echo 'active'; ?>">
                <img src="<?php echo wp_get_attachment_url( get_post_thumbnail_id() ); ?>" alt="...">
                <div class="carousel-caption">
                    <a href="<?php the_permalink() ?>"><h3><?php the_title(); ?></h3></a>
                </div>
            </div>
 
        <!-- End of the loop -->
        <?php $i++; ?>
        <?php endwhile; wp_reset_query(); ?>
 
        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
 
    </div>
</div>