我正在使用以下代码创建客户滑块，但它不起作用需要解决方案答案

【问题标题】：I am creating customer slider with following codes but its not working Need Solutions我正在使用以下代码创建客户滑块，但它不起作用需要解决方案
【发布时间】：2020-11-27 17:16:39
【问题描述】：

我正在尝试创建一个滑块，它将从数据库中获取所有滑块数据。以下是我的代码。输出显示非常尴尬。我还附上了滑块屏幕截图。我尝试了很多，但无法弄清楚我做错了什么？

滑块输出链接

标题部分

<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;

【问题讨论】：

标签： javascript php html css mysql

【解决方案1】：

重新缩进代码后，很明显您在 foreach 循环内打开了 2 个 <div>，但您在循环外关闭了它们。我认为您只想创建一次，因此请尝试将它们放在循环之外：

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>";

【讨论】：