CODEWITHSUNDEEP
phptwitter-bootstrapcodeignitercarousel
user4419336
user4419336

Reputation:

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();


    }
}

Upvotes: 2

Views: 4624

Answers (1)

Gleb Kemarsky
Gleb Kemarsky

Reputation: 10418

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>

Upvotes: 2

Related Questions