My Carousel does not pass the bootstrap images

Question

The code below is being used to show images that are in the BD, however it is not passing the photos:

<div id="conteudo2" class="row">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" class="col-sm-12 col-md-6">
    <div class="carousel-inner">
<!--    <div class="carousel-item active btn-add-more">
-->     <!-- <i class="material-icons" for="uploader-file">add_photo_alternate</i> -->
<!--        <h1 style="cursor: default;">Adicionar mais imagens</h1>
--> <!-- <label class="btn btn-primary" for="uploader-file" style="margin-top: 15px;">
            Adicionar
        </label> -->
    <?php 
    $imagemApicultor = null;
    try {
        $prepared = $conexao_pdo->prepare("SELECT `imagem`, `titulo`, `descricao` FROM carousel_images WHERE `cod_apicultor` = :cod_apicultor order by cod desc");
        $codApicultor = $_SESSION["token"];
        $prepared->bindParam(":cod_apicultor", $codApicultor);
        $prepared->execute();

        if($prepared->rowCount() > 0) {
            $data = $prepared->fetchAll();
            for($i = 0; $i<sizeof($data); $i++) {
                ?>
                <div class="carousel-item active">
                    <div class="localdeimagem" style="width:100%;height:391px;background-position:center;background-size: cover;background-image: url('<?php echo 'api/'.$data[$i]["imagem"]; ?>');">
                    </div>
                    <div class="carousel-caption d-none d-md-block">
                        <h5><?php echo $data[$i]["titulo"] ?></h5>
                        <p><?php echo $data[$i]["descricao"] ?></p>
                    </div>

                </div>
                <?php
            }
        }


    } catch(PDOException $e) {
        print $e->getMessages();
        die();
    }
    ?>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
</a>
</div>

Answer 1

In your code you are placing the css class active on all carousel items. Try changing:

Of:

<div class="carousel-item active">

To:

<div class="carousel-item <?php print ($i == 0) ? 'active' : ''; ?>">

The above code puts the css class active only on the first carousel item.

Edit:

In a local example I separated php logic from HTML to increase readability and applied to the html structure example of bootstrap website with the classes of your example.

The final code went like this:

// esse trecho ficou no topo do arquivo do carossel
session_start();

try {
    $conexao_pdo = new PDO('mysql:host=localhost;dbname=test', 'root', '');
    $conexao_pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

    $prepared       = $conexao_pdo->prepare("SELECT `imagem`, `titulo`, `descricao` FROM carousel_images WHERE `cod_apicultor` = :cod_apicultor order by cod desc");
    $codApicultor   = $_SESSION["token"];

    $prepared->bindParam(":cod_apicultor", $codApicultor);
    $prepared->execute();

    $data = $prepared->fetchAll(PDO::FETCH_OBJ);
    $count = count($data);

} catch(PDOException $e) {
    print $e->getMessage();
    die();
}

<!-- Trecho do carossel -->
<div class="row">
    <div class="bd-example w-100">
        <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
            <div class="carousel-inner">
                <?php for ($i = 0; $i < $count; $i++) : ?>
                    <div class="carousel-item <?php print ($i == 0) ? 'active' : ''; ?>">
                        <div class="localdeimagem d-block" style="height:391px;background: url('<?php echo 'api/'.$data[$i]->imagem; ?>') no-repeat center center / cover;"></div>
                        <div class="carousel-caption d-none d-md-block">
                            <h5><?php print $data[$i]->titulo; ?></h5>
                            <p><?php print $data[$i]->descricao; ?></p>
                        </div>
                    </div>
                <?php endfor; ?>
                <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>

                <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
        </div>
    </div>
</div>

And the carousel was passing automatically and the buttons "Next" and "Previous" also continued working.