CSS幻灯片无法处理来自数据库的图像

Question

I get a free website layout just to learn and keep training my php skills. The website has some slides in the index, and when it was index.html, getting the images from my computer it worked alright. But now i'm searching the images in the database, and instead of slides different images, it's sliding the same images and putting all the rest under the slides. Enter here to see what i mean gabrielozzy.zz.vc/vertigo.

Well in HTML and CSS it worked alright, why it's wrong now if i didn't change the html/css ?

Here's the code:

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

Thanks !

Answer 1

You're trying to loop over the whole div with single image multiple times, where as you have to just loop over the images. So try to put the section> out of the loop and insert just instance of $silde['imagem']. try this in your 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>