Как сделать что бы каруель отображала по три элемента, но листалось по одному???

Question

Как сделать что бы каруель отображала по три элемента, но листалось по одному???

Danil Moore Ученик (104), на голосовании 5 месяцев назад

<?php
$sql_news = "SELECT * FROM news ORDER BY date_added DESC";
$result_news = $conn->query($sql_news);

$cards_news = array();
if ($result_news->num_rows > 0) {
while ($row = $result_news->fetch_assoc()) {
$cards_news[] = $row;
}
}

$conn->close();
?>

<html>
<div class="container mt-5">
<h2 class="fresh-news-label">Свежие новости</h2>
<div id="carouselNews" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<?php for ($i = 0; $i < count($cards_news); $i += 3): ?>
<div class="carousel-item <?php echo $i === 0 ? 'active' : ''; ?>">
<div class="row">
<?php for ($j = $i; $j < min($i + 3, count($cards_news)); $j++): ?>
<div class="col-lg-4">
<div class="card">
<img src="<?php echo $cards_news[$j]['image']; ?>" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title"><?php echo $cards_news[$j]['title']; ?></h5>
<p class="card-text"><?php echo $cards_news[$j]['description']; ?></p>
</div>
</div>
</div>
<?php endfor; ?>
</div>
</div>
<?php endfor; ?>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselNews" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Назад</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselNews" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Вперед</span>
</button>
</div>
</div>
</html>

Answer 1

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

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

Вот как вы можете изменить свой код:

   
    Свежие новости

В данном коде добавляется класс d-none d-lg-block к элементам списка, которые вы хотите скрыть при просмотре на мобильных устройствах (d-lg-block позволяет показывать элементы только на устройствах с шириной экрана от LG (large) и выше). Таким образом, на мобильных устройствах будут видны только по одному элементу на слайде, но на более широких экранах будут видны все три элемента.

Не забудьте проверить, что Bootstrap правильно подключен к вашему проекту, и у вас есть подключение к базе данных ($conn).

Answer 2

Для того чтобы сделать так, чтобы карусель отображала по три элемента, но листалось по одному, нужно добавить JavaScript, который будет обновлять активные элементы карусели при каждом слайде. Вот пример кода с добавленным JavaScript:

https://codeshare.io/mPLNLW

Этот код добавляет обработчик события для `slide.bs.carousel`, который обновляет активные элементы карусели при каждом слайде, обеспечивая, что отображается по три элемента, но листание происходит по одному элементу.