Блог

Главная - Вопросы по программированию - Я создаю слайдер клиента со следующими кодами, но он не работает, нужны решения

Я создаю слайдер клиента со следующими кодами, но он не работает, нужны решения

#javascript #php #html #css #mysql

#javascript #php #HTML #css #mysql

Вопрос:

Я пытаюсь создать слайдер, который будет извлекать все данные слайдера из базы данных. Ниже приведены мои коды. Вывод отображается очень неудобно. Я также прикрепляю снимок экрана слайдера. Я много пробовал, но не смог понять, что я делаю не так?

Ссылка на вывод слайдера

изображение вывода слайдера

Раздел заголовка

 <meta charset="utf-8">
<title>Swiper demo</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">

Стиль

 img {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}

img:hover {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

Тело

 <!-- Swiper -->
<!-- Start Our Recommendations -->
<section>
    <div style="overflow: hidden; background-color: #8F7224;">
        <div class="container">
            <h1 style="text-align: center;" class="p-3 text-white font-weight-bold">
                Our
                <span>
                    Recommendations
                </span>
            </h1>
            <?php

                global $wpdb;
                $result = $wpdb->get_results( "SELECT * FROM `argent`");

                echo "<div>";
                foreach ($result as $row) {
                    echo "<div class="swiper-container-initialized-per-four">";
                    echo "<div class="swiper-wrapper">";
                    echo "<div class="swiper-slide">";
                    echo    "<h1>". $row->id ."</h1>";
                    echo    "<img style="height: 250px; width: 250px; object-fit: fill;" src=" $row->drama_thumbnail " ?>";
                    echo "</div>"; 
                } 
                echo "</div>"; 
                echo "<div class="swiper-button-next"></div>"; 
                echo "<div class="swiper-button-prev"></div>";
                echo "</div>";
                echo "</div>";
            ?>
    </div>
    </div>
</section>

Скрипты

 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<!-- Swiper JS -->
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

<!-- Initialize Swiper -->
<script>
    var swiper = new Swiper('.swiper-container-initialized-per-four', {
        slidesPerView: 4,
        spaceBetween: 40,
        freeMode: true,
        loop: true,
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    });
</script>

Таблица SQL

 CREATE TABLE `argent` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `drama_thumbnail` varchar(255) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8;

Ответ №1:

После повторного отступа вашего кода кажется очевидным, что вы открываете 2 <div> внутри foreach цикла, но вы закрываете их вне цикла. Я думаю, вы хотите создать их только один раз, поэтому попробуйте поместить их вне цикла:

 echo "<div>";
echo "<div class="swiper-container-initialized-per-four">";
echo "<div class="swiper-wrapper">";

foreach ($result as $row) {
    echo "<div class="swiper-slide">";
    echo    "<h1>". $row->id ."</h1>";
    echo    "<img style="height: 250px; width: 250px; object-fit: fill;" src=" $row->drama_thumbnail " ?>";
    echo "</div>"; 
} 
                
echo "</div>"; 
echo "<div class="swiper-button-next"></div>"; 
echo "<div class="swiper-button-prev"></div>";
echo "</div>";
echo "</div>";
Метки: , ,