Как корректно выгрузить данные из базы php в bootstrap слайдер по три элемента?

Question

[TtT RrR]

Хочу вывести товары из базы на слайдер из Бутстрапа. На базе 6 товаров.
Должно получится два слайда, включающие в себя 3 разных товара, но в итоге получается 6 слайдов с 3 одинаковыми:

Как выходит:


Как должно быть:



Доп. стили для слайдера:

.img {
    flex: 0 100px;
}

.img img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.img:not(:has(.card-img-top)) img {
    border-radius: 10px;
}
.card {
    height: 530px;
}

.card .card__img {
    flex: unset;
    width: 100%;
    height: 300px;
    border-bottom: 1px solid var(--bs-card-border-color);
}

.carousel-control-prev,
.carousel-control-next {
    background-color: black;
    width: 40px;
    height: 40px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 100%;
}

.carousel-control-prev {
    left: -5%;
}

.carousel-control-next {
    right: -5%;
}

PHP код:

<div id="carouselExample" class="carousel slide">
            <div class="carousel-inner">
              <?php $menu = mysqli_query($link, "SELECT * FROM `menu`");
              $lenght = mysqli_num_rows($menu);
              while ($card = mysqli_fetch_assoc($menu)) : ?>
                <div class="carousel-item">
                  <div class="row">
                    <?php for ($j = 0; $j <= 2; $j++) { ?>
                      <div class="col">
                        <a href="card-info.php?id=<?= $card['id'] ?>" class="card">
                          <div class="card__img img">
                            <img src="<?= $card['img'] ?>" class="card-img-top" alt="<?= $card['img'] ?>">
                          </div>
                          <div class="card-body">
                            <h5 class="card-title"><?= $card['title'] ?></h5>
                            <p class="card-text"><?= $card['description'] ?></p>
                          </div>
                          <div class="card-footer">
                            <div class="row align-items-center">
                              <div class="col-5">
                                <p class="m-0"><?= $card['price'] ?> р.</p>
                              </div>
                              <object class="col" data="" type="">
                                <a href="#" class="btn btn-primary w-100">В корзину</a>
                              </object>
                            </div>
                          </div>
                        </a>
                      </div>
                    <?php } ?>
                  </div>
                </div>
              <?php endwhile; ?>
            <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
              <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
              <span class="carousel-control-next-icon" aria-hidden="true"></span>
            </button>
          </div>

Comments

[maksam07]

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

while ($card = mysqli_fetch_assoc($menu)) : ?>
                <div class="carousel-item">
                  <div class="row">
                    <?php for ($j = 0; $j <= 2; $j++) { ?>

[TtT RrR]

maksam07, ну вот так. Цикл while 6 слайдов с одним товаром генерит, если убрать for. Если while переместить в row, то он 6 штук в одном слайде сделает. С помощью for получилось сделать по три штуки в слайде. Дальше я не могу додуматься.

[maksam07]

TtT RrR, так у вас по 3 слайда одного и того же товара. Вы же используете одну переменную в фор для всех отераций одной итерации вайл

[TtT RrR]

maksam07, тогда как мне это исправлять? For и while местами поменять? И j<$lenght/3 поставить, после while прибавить j?

[maksam07]

TtT RrR,
https://www.php.net/manual/ru/function.array-chunk.php
Этот вариант должен вам помочь.

[TtT RrR]

maksam07, array_chunk будет работать с mysqli?

[maksam07]

TtT RrR, нет. Сначала нужно сформировать массив товаров

Answer 1

[TtT RrR]

В общем сам додумал и смог учесть случай с 1 или 2 товарами в одном слайде
Слайдер на Bootstrap 5.3:

<div id="carouselExample" class="carousel slide">
   <div class="carousel-inner">
    <?php $menu = mysqli_query($link, "SELECT * FROM `menu` ORDER BY `id` DESC LIMIT 5");
     $length = mysqli_num_rows($menu);
     $i = 0; ?>
     <div class="carousel-item active">
        <div class="row">
         <?php while ($card = mysqli_fetch_assoc($menu)) :
          $i++;
           // ДОБАВЛЯЕМ ВСЕ ТОВАРЫ
          if ($i % 3 != 0 || $i == $length) {
             include 'vendor/components/card-load.php';
           } elseif ($i % 3 == 0) { 
               // ЕСЛИ НА СЛАЙДЕ 3 ТОВАРА, ТО ЗАКРЫВАЕМ ЕГО И ДЕЛАЕМ НОВЫЙ
               include 'vendor/components/card-load.php';
               echo '</div>
                      </div>
                   <div class="carousel-item">
                     <div class="row">';
           }
           // ЕСЛИ НА ОДНОМ СЛАЙДЕ МЕНЕЕ, ЧЕМ 3 ТОВАРА,
           // ТО ДОБАВЛЯЕМ ПУСТУЮ КОЛОНКУ.
           // ЧИСЛО СЛАЙДА ОТНИМАЕМ ОТ ОСТАТКА СЛАЙДА
           // ПРИ ДЕЛЕНИИ И СРАВНИВАЕМ С $j.
           // (СЛАЙДЕР БУДЕТ ВЫГЛЯДЕТЬ КОРРЕКТНО)
           if ($i == $length && $length % 3 != 0) {
             for ($j = 0; $j < 3 - ($i % 3); $j++) {
               echo '<div class="col"></div>';
             }
          }
            endwhile; ?>
          </div>
        </div>
      </div>
            <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
              <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
              <span class="carousel-control-next-icon" aria-hidden="true"></span>
            </button>
    </div>
</div>

Структура файла card-load.php:

<div class="col">
  <a href="card-info.php?id=<?= $card['id'] ?>" class="card">
    <div class="card__img img">
      <img src="<?= $card['img'] ?>" class="card-img-top" alt="<?= $card['img'] ?>">
    </div>
    <div class="card-body">
      <h5 class="card-title"><?= $card['title'] ?></h5>
      <p class="card-text"><?= $card['description'] ?></p>
    </div>
    <div class="card-footer">
      <div class="row align-items-center">
        <div class="col-5">
          <p class="m-0"><?= $card['price'] ?> р.</p>
        </div>
        <object class="col">
          <a href="#" class="btn btn-primary w-100">В корзину</a>
        </object>
      </div>
    </div>
  </a>
</div>