wolfgang1983 wolfgang1983 - 5 months ago 220
PHP Question

Bootstrap Carousel Thumbnail Silider with PHP codeigniter

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.

enter image description here

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">&lsaquo;</a>
<a class="carousel-control right" href="#carousel-thumbnail<?php echo $module; ?>" data-slide="next">&rsaquo;</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

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>
Comments