У меня есть горизонтальная карусель, которая работает нормально, вот код для этого
Теперь я хочу получить данные из базы данных и отобразить их в том же корпусе. Ниже приведен код, который я использовал
<div class='row'>
<div class='col-xs-12'>
<div class="carousel slide media-carousel" id="media">
<div class="carousel-inner">
<div class="item active">
<div class="row">
<?php foreach($student as $student): ?>
<div class="col-md-3">
<a class="thumbnail" href="#"><?php echo $student->fullname;?></a>
</div>
<?php endforeach; ?>
</div>
</div>
</div>
<a data-slide="prev" href="#media" class="left carousel-control">‹</a>
<a data-slide="next" href="#media" class="right carousel-control">›</a>
</div>
</div>
</div>
но вид искажен и вместо всех слайдов, скользящих в одном ряду, вид выглядит так
Поскольку вы не дали код php, я даю вам его пример
Массив, который вы получаете, разделите его на группу из 4 (или столько, сколько вы хотите), как показано ниже
$query = $this->db->get('student');
$r = $query->result();
$s = (array_chunk($r, 4));
return $s;
А затем в коде, который вы дали, перейдите в следующий
<div class="carousel-inner">
<?php foreach($s as $key => $per_student): ?>
<?php if($key=='0'): ?>
<div class="item active">
<?php else: ?>
<div class="item ">
<?php endif; ?>
<div class="row">
<?php foreach($per_student as $student): ?>
<div class="col-md-3">
<a class="thumbnail" href="#"><?php echo $student->fullname;?></a>
</div>
<?php endforeach; ?>
</div>
</div>
<?php endforeach; ?>
</div>
Это потому, что если строка не активна, другая строка .item получает свойство display:none;
Если вы должны были удалить дисплей: нет; это должно работать, как вы хотите.
Создайте class = «row» внутри цикла. Также имейте в виду, что экран состоит только из 12 единиц, поэтому, если вы создадите ряд из более чем 12 единиц, он автоматически перейдет на следующую строку. Поскольку вы создали цикл, который создает «col-md-3» более 4 раз, а сумма больше 12, он переходит к следующей строке.
Для справки этот