TtT RrR

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

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

$(document).on("click", ".products__card", (e) => {
  const modalOverlay = document.querySelector(".products-popup");
  let num = e.currentTarget.getAttribute("data-num");
// Число передаётся в функцию, чтоб показать конкретную инфу в popup
  loadPopup(num);
setTimeout(() =>{
  const modals = document.querySelectorAll(".products-popup__wrapper");
  const target = document.querySelector(`[data-target="${num}"]`);
  console.log(target);
  modals.forEach((modal) => {
    modal.classList.remove("popup__wrapper_active");
  });
  target.classList.add("popup__wrapper_active");
  modalOverlay.classList.add("popup_active");
  document.querySelector("body").classList.add("lock");

  modalOverlay.addEventListener("click", (e) => {
    if (e.target == modalOverlay || e.target.closest('.products-popup__close')) {
      modalOverlay.classList.remove("popup_active");
      document.querySelector("body").classList.remove("lock");
      modals.forEach((modal) => {
        modal.classList.remove("popup__wrapper_active");
      });
    }
  });
}, 100);
});

const fioUrl = "https://jsonplaceholder.typicode.com/users";

const xhr = new XMLHttpRequest();
xhr.open("GET", fioUrl);
xhr.responseType = "json";
xhr.onload = function () {
  console.log(xhr.response);

  document.querySelector("#demo").innerHTML = toHtml(xhr.response);
};
xhr.send();

function toHtml(json) {
  let html = "";
  for (let k = 0; k < json.length; k++) {
    const key = json[k];
    html += `<tr>
        <td>${key.id}</td>
        <td>${key["name"]}</td>
        <td>${key["username"]}</td>
        <td>${key.email}</td>
        <td>${key.address['street']} - ${key.address['suite']}</td>
        <td>${key.phone}</td>
        <td>${key.website}</td>
        <td>${key.company['name']}</td>
      </tr>`;
  }
  return html;
}