PHP / Bootstrap - многоэлементная карусель - PullRequest
Новая
       7

PHP / Bootstrap - многоэлементная карусель

0 голосов
/ 09 июля 2019

У меня есть сайт электронной коммерции, и я пытаюсь добавить соответствующие продукты в карусель внизу страницы продукта:

Я запрашиваю свою БД, чтобы получить соответствующие продукты, а затем создаю простую загрузочную карусель.

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

Каждый элемент карусели имеет фиксированную ширину и высоту: 

.carousel-item{
    width:300px;
    height:400px;
    border:1px solid var(--grey3);
}

Я попытался разбить свой элемент карусели на столбцы с помощью начальной загрузки (как показано здесь https://www.youtube.com/watch?v=SAyLQVR1t5s), но мне нужно, чтобы они были определенного размера, чтобы соответствовать информации о продукте, чтобы иметь гибкие столбцы внутри элемента карусели для хранения.каждый продукт не будет работать, когда я изменю размер экрана.

Мой PHP-код выглядит следующим образом: 

$related .= '<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">';
$related .= '<div class="carousel-inner">';

$i = 0;
$params = [$product_name,$product_name,$_SESSION['locale']['product_set']];
$sql = "SELECT * FROM products WHERE MATCH(product_name) AGAINST(?) AND product_name!=? AND product_set=? LIMIT 15";
$stmt = DB::run($sql,$params);
while ($row = $stmt->fetch(PDO::FETCH_ASSOC)){
    $related_product_id = $row["id"];
    $related_product_name = $row["product_name"];

    $related .= '<div class="carousel-item';
    if($i==0){$related .= ' active';}
    $related .= '">';
    $related .= '//product_info';
    $related .= '</div>';

    $i++;
}

$related .= '</div>';
$related .= '<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">';
$related .= '&lsaquo;';
$related .= '</a>';
$related .= '<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">';
$related .= '&rsaquo;';
$related .= '</a>';
$related .= '</div>';

Буду признателен за любую помощь или предложения о том, как этого добиться.

...