Не удается выровнять горизонтальный слайдер в ряд

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

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

но вид искажен и вместо всех слайдов, скользящих в одном ряду, вид выглядит так

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

1

Решение

Поскольку вы не дали код 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>
1

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

Это потому, что если строка не активна, другая строка .item получает свойство display:none; Если вы должны были удалить дисплей: нет; это должно работать, как вы хотите.

0

Создайте class = «row» внутри цикла. Также имейте в виду, что экран состоит только из 12 единиц, поэтому, если вы создадите ряд из более чем 12 единиц, он автоматически перейдет на следующую строку. Поскольку вы создали цикл, который создает «col-md-3» более 4 раз, а сумма больше 12, он переходит к следующей строке.
Для справки этот

0
По вопросам рекламы ammmcru@yandex.ru
Adblock
detector