I'm trying to display the images in the Bootstrap carousel with the while.
I can access the array with all urls, but I am not able to insert in the while in the img tag, I tried while with foreach to display the images but it is not working.
Already the indicators are displaying correctly but with one more indicator, how do I not count the 0
?
<?php
$this_post_id = get_the_ID();
$urls =get_post_meta($this_post_id,'my-images', true);
$totalUrls = count($urls);//conta urls no 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"> // como deixar classe active apenas na imagem ativa
<img src="<?php echo $url;?>" class="img-responsive" />
<div class="carousel-caption">
...
</div>
</div>
<?php $number++
} //end foreach
} //end while
?>
</div>
Updated
<?php
$this_post_id = get_the_ID();
$urls =get_post_meta($this_post_id,'my-image-for-post', 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 foreach($urls as $url){ ?>
<div class="item active">
<img src="<?php echo $url;?>" class="img-responsive" />
<div class="carousel-caption">
...
</div>
</div>
<?php } ?>
With the help of user Anderson Carlos Woss,
I fixed the conditional for: while $ number is <
than $ totalUrls, this fixed the problem in the pointers.
I left the while only in the foreach, the foreach to display the images and I can see all images there if they all have the class active
in <div class="item active">
How do I leave only 1 image with the active class inside the foreach?
Thank you for your help