Я пытаюсь заставить загрузочную карусель работать как этот пример ниже, но с некоторым кодом php.
Но с 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">‹</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>
Мой контроллер
<?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();}
}
Каждый элемент представляет собой группу из четырех изображений. Индикатор указывает группу, а не изображение. Поэтому количество показателей в четыре раза меньше количества изображений.
<!-- 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>
Других решений пока нет …