Bootstrap Карусель Миниатюрный Silider с PHP codeigniter

Я пытаюсь заставить загрузочную карусель работать как этот пример ниже, но с некоторым кодом php.

http://www.bootply.com/81478

Но с PHP-кодом, где у него есть строки и столбцы. У меня есть 5 изображений, которые я показал, но каждое по какой-то причине появляется как новый слайд.

На одном ряду должно быть около 4 — 5 изображений. Но с моим php-кодом, кажется, не работает должным образом, показывает только одно изображение каждого слайда.

Мой вопрос: на мой взгляд, есть ли возможность сделать каждый слайд для отображения около 4 изображений.

введите описание изображения здесь

Мой взгляд

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

Мой контроллер

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

2

Решение

индикаторы

Каждый элемент представляет собой группу из четырех изображений. Индикатор указывает группу, а не изображение. Поэтому количество показателей в четыре раза меньше количества изображений.

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

Предметы

Вам нужно завернуть в row серия из четырех слайдов, а не по одному:

<!-- 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>
1

Другие решения

Других решений пока нет …