How to integrate PHP code into HTML Carousel code? - php

Question

Can anybody help with the below please. Im having a bit of difficulty getting my head around how to get it to work.
The code is for a thumbnail carousel.
Here is the HTML
<div class="carousel slide" id="myCarousel">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item" data-slide-number="0">
<img src="http://placehold.it/770x300&text=one">
</div>
<div class="item" data-slide-number="1">
<img src="http://placehold.it/770x300&text=two">
</div>
<div class="item" data-slide-number="2">
<img src="http://placehold.it/770x300&text=three">
</div>
<div class="item" data-slide-number="3">
<img src="http://placehold.it/770x300&text=four">
</div>
<div class="item" data-slide-number="4">
<img src="http://placehold.it/770x300&text=five">
</div>
<div class="item" data-slide-number="5">
<img src="http://placehold.it/770x300&text=six">
</div>
</div>
<!-- Carousel nav -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<!--thumbnails-->
<div class="row hidden-xs" id="slider-thumbs">
<ul class="hide-bullets">
<li class="col-sm-2">
<a class="thumbnail" id="carousel-selector-0">
<img src="http://placehold.it/170x100&text=one">
</a>
</li>
<li class="col-sm-2">
<a class="thumbnail" id="carousel-selector-1">
<img src="http://placehold.it/170x100&text=two">
</a>
</li>
<li class="col-sm-2">
<a class="thumbnail" id="carousel-selector-2">
<img src="http://placehold.it/170x100&text=three">
</a>
</li>
<li class="col-sm-2">
<a class="thumbnail" id="carousel-selector-3">
<img src="http://placehold.it/170x100&text=four">
</a>
</li>
<li class="col-sm-2">
<a class="thumbnail" id="carousel-selector-4">
<img src="http://placehold.it/170x100&text=five">
</a>
</li>
<li class="col-sm-2">
<a class="thumbnail" id="carousel-selector-5">
<img src="http://placehold.it/170x100&text=six">
</a>
</li>
</ul>
</div>
The above code works fine, however I am trying to integrate the below PHP code so that the slider has dynamic images with thumbnails.
Here is the PHP code to display the images:
<?php
if ($images = get_field('images', $design_id)) {
foreach ($images as $image) {
echo '<img src="' . $image['image']['sizes']['large'] . '" />';
}
}
?>
If anyone could help or point me in the right direction, it would be appreciated!

Answer 1

Try this. Note where code starts and ends i didn't copy all of your block:
<div class="carousel-inner">
<?php
if ($images = get_field('images', $design_id)) {
foreach ($images as $key => $image) {
$active = $key == 0 ? 'active' : '';
echo '<div class="<?php echo $active;?> item" data-slide-number="<?php echo $key; ?>">';
echo '<img src="' . $image['image']['sizes']['large'] . '" />';
echo '</div>'; }
}
?>
</div>
Explanation. Showing the images is not only to print img src=..., so you have to see what html block to put in the foreach loop so it be showed as the html you posted. $key is the index that you need to mark the slides. $active shows which slide is active, so you need to set it only ones (in our case when $key is 0)
Cheers.