Bootstrap Carousel Thumbnail Silider with PHP codeigniter - php

Question

I am trying to get a bootstrap carousel to perform like this example below but with some php code.
http://www.bootply.com/81478
But with php code where it has row and columns. I have 5 images that I have displayed but each one for some reason comes in as a new slide.
It should show about 4 - 5 images on one row. But with my php code does not seem to work properly only shows one image each slide.
My Question is: In my view is there any way to be able to make each slide to display about 4 images.
My View Is
<div id="carousel-thumbnail<?php echo $module;?>" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<?php foreach ($banners as $i => $banner) { ?>
<li data-target="#carousel-thumbnail<?php echo $module; ?>" data-slide-to="<?php echo $i; ?>"<?php echo !$i ? ' class="active"' : ''; ?>></li>
<?php } ?>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<?php foreach ($banners as $i => $banner) { ?>
<div class="item<?php echo !$i ? ' active' : ''; ?>">
<div class="row">
<div class="col-lg-3">
<img src="<?php echo $banner['src']; ?>" class="img-thumbnail">
</div>
</div>
</div>
<?php } ?>
</div>
<!-- Controls -->
<?php if (count($banners) > 1) { ?>
<a class="carousel-control left" href="#carousel-thumbnail<?php echo $module; ?>" data-slide="prev">‹</a>
<a class="carousel-control right" href="#carousel-thumbnail<?php echo $module; ?>" data-slide="next">›</a>
<?php } ?>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#carousel<?php echo $module;?>').carousel({
interval: 10000
});
});
</script>
My Controller
<?php
class Carousel extends MX_Controller {
public function __construct() {
parent::__construct();
}
public function index($info) {
static $module = 0;
$data['banners'] = array();
$banners = $this->get_banner($info[0]['module_display_id']);
foreach ($banners as $banner) {
if (is_file(FCPATH . 'images/' . $banner['banner_image'])) {
$data['banners'][] = array(
'src' => base_url() . 'images/' . $banner['banner_image']
);
} else {
$data['banners'][] = array(
'src' => $banner['banner_image']
);
}
}
$data['module'] = $module++;
$this->load->view('theme/default/template/module/carousel', $data);
}
public function get_banner($banner_id) {
$this->db->select('*');
$this->db->from('banner b', 'LEFT');
$this->db->join('banner_image bi', 'bi.banner_id = b.banner_id', 'LEFT');
$this->db->where('b.banner_id', $banner_id);
$this->db->where('b.banner_status', '1');
$this->db->order_by('banner_sort_order', 'ASC');
$query = $this->db->get();
return $query->result_array();
}
}

Answer 1

PHP code for groups of four images
Indicators
Each item is a group of four images. The indicator indicates the group, rather than the image. Therefore, the number of indicators is four times less than the number of images.
<!-- Indicators -->
<ol class="carousel-indicators">
<?php for ($i = 0; $i < ceil(count($banners) / 4); $i++) { ?>
<li data-target="#carousel-thumbnail<?php echo $module; ?>" data-slide-to="<?php echo $i; ?>"<?php echo !$i ? ' class="active"' : ''; ?>></li>
<?php } ?>
</ol>
Items
You need to wrap in the row a series of four slide, rather than one by one:
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<div class="row">
<?php foreach ($banners as $i => $banner) { ?>
<?php if (($i > 0) && ($i % 4 == 0)) { ?>
</div>
</div>
<div class="item">
<div class="row">
<?php } ?>
<div class="col-lg-3">
<img src="<?php echo $banner['src']; ?>" class="img-thumbnail">
</div>
<?php } ?>
</div>
</div>
</div>