Добрый вечер, начал изучать PHP и столкнулся с проблемой в свайпере...
Решил использоваться свайпер с JS "
https://codesandbox.io/s/swiper-slides-per-view-oy...", но, почему-то в PHP он некорректно у меня отображается, полистав форумы, смог хоть немного приблизится к своей задумке, но всё ровно свайпер не работает и просто отображаются все фотографии в строку(получилось как на скриншоте).
Что я делаю не так или как вы реализовывали такую карусель?
код со свайпером прикладываю, стили от туда убрал, чтобы не загромождать...
<?php
$connect = mysqli_connect("localhost", "root", "root", "wooclothes");
function make_query($connect)
{
$query = "SELECT * FROM `clothes` ORDER BY `id` ASC";
$result = mysqli_query($connect, $query);
return $result;
}
function make_slide_indicators($connect)
{
$output = '';
$count = 0;
$result = make_query($connect);
while($row = mysqli_fetch_array($result))
{
if($count == 0)
{
$output .= '
<li data-target="#dynamic_slide_show" data-slide-to="'.$count.'" class="active"></li>
';
}
else
{
$output .= '
<li data-target="#dynamic_slide_show" data-slide-to="'.$count.'"></li>
';
}
$count = $count + 1;
}
return $output;
}
function make_slides($connect)
{
$output = '';
$count = 0;
$result = make_query($connect);
while($row = mysqli_fetch_array($result))
{
$output .= '
<img src="/static/images/shoes/'.$row["image1"].'" alt="'.$row["name"].'" />
';
$count = $count + 1;
}
return $output;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Swiper demo</title>
<meta
name="viewport"
content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"
/>
<!-- Link Swiper's CSS -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css"
/>
</head>
<body>
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide"><?php echo make_slides($connect); ?></div>
</div>
<div class="swiper-pagination"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>
<script>
var swiper = new Swiper(".mySwiper", {
slidesPerView: 3,
spaceBetween: 30,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
});
</script>
</body>
</html>
