Задать вопрос
@Nikden_72

Как правильно сделать свайпер в PHP?

Добрый вечер, начал изучать PHP и столкнулся с проблемой в свайпере...
Решил использоваться свайпер с JS "https://codesandbox.io/s/swiper-slides-per-view-oy...", но, почему-то в PHP он некорректно у меня отображается, полистав форумы, смог хоть немного приблизится к своей задумке, но всё ровно свайпер не работает и просто отображаются все фотографии в строку(получилось как на скриншоте).
62ea90475b715216576268.png
Что я делаю не так или как вы реализовывали такую карусель?
код со свайпером прикладываю, стили от туда убрал, чтобы не загромождать...
<?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>
  • Вопрос задан
  • 169 просмотров
Подписаться 1 Простой Комментировать
Решения вопроса 2
scottparker
@scottparker
ты же понимаешь, что в данном случае пхп лишь генерирует html-разметку беря данные из бд? ты можешь сделать этот же слайдер просто на html? если да, то посмотри какую разметку сделал (без применения js)
Ответ написан
Комментировать
@AlexGlinskiy
В твоем случае нужно заменить примерно так:
Функция make_slides:
$output .= '<div class="swiper-slide"><img src="/static/images/shoes/'.$row["image1"].'" alt="'.$row["name"].'" /></div>';

html:
<div class="swiper-wrapper">
        <?php echo make_slides($connect); ?>
</div>
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@Asokr
Не очень понятно, но видимо у вас все картинки в одном слайде, т.к. swiper-slide - это один слайд и вы туда помещаете все изображения...
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы