CSS 幻灯片无法使用数据库中的图像

Question

我得到了一个免费的网站布局，只是为了学习和继续训练我的 php 技能。该网站在索引中有一些幻灯片，当它是 index.html 时，从我的计算机获取图像它工作正常。但现在我正在搜索数据库中的图像，而不是幻灯片不同的图像，而是滑动相同的图像并将所有其余图像放在幻灯片下。在这里输入看看我的意思 gabrielozzy.zz.vc/vertigo.

嗯，在 HTML 和 CSS 中它工作正常，如果我不更改 html/css 为什么它现在是错误的？

代码如下：

<?php 
    $slides = listarSlides($conexao);
        foreach($slides as $slide){
            echo'
    <section id="dg-container" class="dg-container">
            <div class="dg-wrapper">
                    <a href="#"><img src="images/' . $slide['imagem'] . '"alt="image1" /></a>
                    <a href="#"><img src="images/' . $slide['imagem'] . '"alt="image2" /></a>
                    <a href="#"><img src="images/' . $slide['imagem'] . '"alt="image3" /></a>
                    <a href="#"><img src="images/' . $slide['imagem'] . '"alt="image4" /></a>
                    <a href="#"><img src="images/' . $slide['imagem'] . '"alt="image5" /></a>
                    <a href="#"><img src="images/' . $slide['imagem'] . '"alt="image1" /></a>
                    <a href="#"><img src="images/' . $slide['imagem'] . '"alt="image2" /></a>
                    <a href="#"><img src="images/' . $slide['imagem'] . '"alt="image3" /></a>
                    <a href="#"><img src="images/' . $slide['imagem'] . '"alt="image4" /></a>
                    <a href="#"><img src="images/' . $slide['imagem'] . '"alt="image5" /></a>
                    <a href="#"><img src="images/' . $slide['imagem'] . '"alt="image1" /></a>
                    <a href="#"><img src="images/' . $slide['imagem'] . '"alt="image2" /></a>
                    <a href="#"><img src="images/' . $slide['imagem'] . '"alt="image3" /></a>
            </div>
    </section>';
        }
    ?>

functions.php:

<?php 
    function listarSlides($conexao){
        $slides = array();
        $query = "select imagem from slides order by cod_slides LIMIT 13";
        $resultado = mysqli_query($conexao, $query);
        while($slide = mysqli_fetch_assoc($resultado)){
            array_push($slides, $slide);
        }
        return $slides;
    }
?>

谢谢！

Answer 1

您正在尝试使用单个图像多次遍历整个 div，而您必须只遍历图像。因此，尝试将 section> 置于循环之外并仅插入 $silde['imagem'] 的实例。在你的 php 中试试这个：

<section id="dg-container" class="dg-container">
            <div class="dg-wrapper">    
 <?php 
    $slides = listarSlides($conexao);
        foreach($slides as $slide){
            echo'

                    <a href="#"><img src="images/' . $slide['imagem'] . '"alt="image1" /></a>

            ';
        }
    ?>
</div>
    </section>

CSS 幻灯片无法使用数据库中的图像

CSS slide not working with images from database

html

css

php

function

slide