Здравствуйте, девелоперы!
Мне нужно выводить по 4 афиши на один слайд на слайдере, то есть примерно так:
--Каркас слайдера--
---Первый слайд---
====Афиша 1====
====Афиша 2====
====Афиша 3====
====Афиша 4====
---Конец первого слайда---
---Второй слайд---
====Афиша 5====
====Афиша 6====
====Афиша 7====
====Афиша 8====
---Конец второго слайда---
--Конец каркас слайдера--
--------------------------------
Мне эти афиши нужно вывести с 2 таблиц.(Название категории и название самой афиши)(poster - тут названия афиш, setting_main - название категория).
Вот так выглядит мой запрос:
$query_main = mysqli_query($connect, "
SELECT setting_main.title, setting_main.id, setting_main.sort, poster.id, poster.name, poster.image
FROM setting_main
INNER JOIN poster
ON poster.main = setting_main.id
ORDER BY setting_main.sort;
");
Дальше я это перевожу в цикл (в нем и заключается сама проблема, как циклом выводить по 4 афиши в один div блок ?)
Вот сам цикл:
while ( ($cat = mysqli_fetch_assoc($query_main)) ) {
$categoryarticles['<h2>'.$cat['title'].'</h2>'][]='<div class="col-sm-3 col-xs-6"><div class="event-card"><img src="./img/'.$cat['image'].'" alt="'.$cat['name'].'"><button class="reserved">Бронировать</button><button class="buy">Купить</button></div></div>';
}
Далее все вывожу через двумерный массив:
foreach ($categoryarticles as $key=>$category) {
?>
<div class="sport">
<div id="carousel-sport" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active text-center">
<?php
echo $key;
foreach ($category as $article) {
echo $article;
}
?>
</div>
</div>
<a class="left carousel-control" href="#carousel-sport" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-sport" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
<?php
}
Вот наглядный пример, как нужно вывести:
<div class="sport">
<h2>спорт</h2>
<div id="carousel-sport" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active text-center"> - первый слайд
<div class="col-sm-3 col-xs-6">
<div class="event-card">
<img src="../assets/img/events-pic-2.jpg" alt="...">
<button class="reserved">Бронировать</button>
<button class="buy">Купить</button>
</div>
</div>
<div class="col-sm-3 col-xs-6">
<div class="event-card">
<img src="../assets/img/events-pic-2.jpg" alt="...">
<button class="reserved">Бронировать</button>
<button class="buy">Купить</button>
</div>
</div>
<div class="col-sm-3 col-xs-6">
<div class="event-card">
<img src="../assets/img/events-pic-2.jpg" alt="...">
<button class="reserved">Бронировать</button>
<button class="buy">Купить</button>
</div>
</div>
<div class="col-sm-3 col-xs-6">
<div class="event-card">
<img src="../assets/img/events-pic-2.jpg" alt="...">
<button class="reserved">Бронировать</button>
<button class="buy">Купить</button>
</div>
</div>
</div>
<div class="item text-center"> - второй слайд
<div class="col-sm-3 col-xs-6">
<div class="event-card">
<img src="../assets/img/events-pic-2.jpg" alt="...">
<button class="reserved">Бронировать</button>
<button class="buy">Купить</button>
</div>
</div>
<div class="col-sm-3 col-xs-6">
<div class="event-card">
<img src="../assets/img/events-pic-2.jpg" alt="...">
<button class="reserved">Бронировать</button>
<button class="buy">Купить</button>
</div>
</div>
<div class="col-sm-3 col-xs-6">
<div class="event-card">
<img src="../assets/img/events-pic-2.jpg" alt="...">
<button class="reserved">Бронировать</button>
<button class="buy">Купить</button>
</div>
</div>
<div class="col-sm-3 col-xs-6">
<div class="event-card">
<img src="../assets/img/events-pic-2.jpg" alt="...">
<button class="reserved">Бронировать</button>
<button class="buy">Купить</button>
</div>
</div>
</div>
</div>
Простой
