Twitter Bootstrap Carousel - displaying multiple thumbnails - php

Question

I've created Carousel which displays 4 thumbnails per slide and I have two slides.
<div class="container">
<div class="row">
<div class="carousel slide span8" id="myCarousel">
<div class="carousel-inner">
<div class="item active">
<ul class="thumbnails">
<li class="span2">
<div class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</div>
</li>
<li class="span2">
<div class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</div>
</li>
<li class="span2">
<div class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</div>
</li>
<li class="span2">
<div class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</div>
</li>
</ul>
</div>
<div class="item">
<ul class="thumbnails">
<li class="span2">
<div class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</div>
</li>
<li class="span2">
<div class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</div>
</li>
<li class="span2">
<div class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</div>
</li>
<li class="span2">
<div class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</div>
</li>
</ul>
</div>
</div>
<a data-slide="prev" href="#myCarousel" class="left carousel-control">‹</a>
<a data-slide="next" href="#myCarousel" class="right carousel-control">›</a>
</div>
</div>
These slides are populated with images from database using codeigniter. Now question is, if I want to create 6-7 slides and I don't want to create them all manually how should I go about it in code. So when I click left arrow new set of images is loaded.

Answer 1

Find the common denominator between all the images. In other words, this code snippet:
<li class="span2">
<div class="thumbnail">
<img src="IMAGE_URL" alt="">
</div>
</li>
Since that is standard and not changing for each image, you can print it out in a foreach loop. Query the image urls from the database into an array, then run your foreach loop inside of the html:
<div class="carousel-inner">
<div class="item active">
<ul class="thumbnails">
<?php foreach($image_url as $image) { ?>
<li class="span2">
<div class="thumbnail">
<img src="<?php echo $image; ?>" alt="">
</div>
</li>
<?php } ?>
</ul>
</div>

Answer 2

Twitter Bootstrap Carousel - displaying multiple thumbnails in Wordpress
<div class="container">
<!-- Carousel -->
<div id="promo-carousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<?php
// Item size (set here the number of posts for each group)
$i = 4;
// Set the arguments for the query
global $post;
$args = array(
'numberposts' => -1, // -1 is for all
'post_type' => 'post', // or 'post', 'page'
'orderby' => 'title', // or 'date', 'rand'
'order' => 'ASC', // or 'DESC'
);
// Get the posts
$myposts = get_posts($args);
// If there are posts
if($myposts):
// Groups the posts in groups of $i
$chunks = array_chunk($myposts, $i);
/*
* Item
* For each group (chunk) it generates an item
*/
foreach($chunks as $chunk):
// Sets as 'active' the first item
($chunk === reset($chunks)) ? $active = "active" : $active = "";
echo '<div class="item '.$active.'"><div class="container"><div class="row">';
/*
* Posts inside the current Item
* For each item it generates the posts HTML
*/
foreach($chunk as $post):
echo '<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">';
the_post_thumbnail();
echo '</div>';
endforeach;
echo'</div></div></div>';
endforeach;
// Prints the HTML
endif;
?>
</div> <!-- carousel inner -->
<!-- Controls -->
<a class="left carousel-control" href="#promo-carousel" role="button" data-slide="prev">
<span class="fa fa-arror-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#promo-carousel" role="button" data-slide="next">
<span class="fa fa-arror-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div> <!-- /carousel -->
</div>