Carousel Bootstrap with images coming from server folder

Question

I have the following code:

<div id="myCarousel" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
        </ol>

        <?php

        include 'conexao.php';

        $consulta = $PDO->query("SELECT * FROM imoveis WHERE id='$imovelid';");
        while ($linha = $consulta->fetch(PDO::FETCH_ASSOC)) {

            $pasta = "painel/galeria/$linha[fotos]/";
            $imagens = glob("$pasta/{*.jpg,*.JPG,*.png,*.PNG}",GLOB_BRACE);
            foreach($imagens as $img){ ?>

                <div class="carousel-inner">
                    <div class="item active">
                        <img src="<?php echo $img ?>" alt="<?php echo "$linha[titulo]"; ?>">
                    </div>
                    <div class="item">
                        <img src="<?php echo $img ?>" alt="<?php echo "$linha[titulo]"; ?>">
                    </div>
                </div>

            <? } } ?>

            <a class="left carousel-control" href="#myCarousel" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#myCarousel" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>

When generating the slider with the images coming from the folder, which is previously registered in a database field, my result is as follows:

Images get stacked, instead of passing one at a time.

I’ve tried to change the location to open and close div’s, but I haven’t had much success.

Any hint?

Answer 1

It’s because your while and the foreach are doing the <div class="carousel-inner"> repeated several times, this element must be unique for each Carousel

Another situation to be corrected is that the class active should be added to only one element at a time, ie you can make a boolean variable to check if it has already been added, an if inline solves:

<?php echo $primeiroActive ? ' active' : ''; ?>

I also suspect that this is repetition:

    <div class="item active">
        <img src="<?php echo $img ?>" alt="<?php echo "$linha[titulo]"; ?>">
    </div>
    <div class="item">
        <img src="<?php echo $img ?>" alt="<?php echo "$linha[titulo]"; ?>">
    </div>

And can be removed.

One corrected example and adds the check for active:

<div id="myCarousel" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
    </ol>

    <!-- conteudo do carousel começa -->
    <div class="carousel-inner">

    <?php

    include 'conexao.php';

    $primeiroActive = true;

    $consulta = $PDO->query("SELECT * FROM imoveis WHERE id='$imovelid';");
    while ($linha = $consulta->fetch(PDO::FETCH_ASSOC)) {

        $pasta = "painel/galeria/$linha[fotos]/";
        $imagens = glob("$pasta/{*.jpg,*.JPG,*.png,*.PNG}",GLOB_BRACE);
        foreach($imagens as $img){ ?>

                <div class="item <? echo $primeiroActive ? ' active' : ''; ?>">
                    <img src="<?php echo $img ?>" alt="<?php echo "$linha[titulo]"; ?>">
                </div>

        <?
        $primeiroActive = false; //Torna em false para não adicionar novamente o active
        } }
        ?>

            <!-- conteudo do carousel termina -->
            </div>

        <a class="left carousel-control" href="#myCarousel" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>

Answer 2

The error in your code is in this snippet

       foreach($imagens as $img){ ?>
                <div class="carousel-inner">
                    <div class="item active">
                        <img src="<?php echo $img ?>" alt="<?php echo "$linha[titulo]"; ?>">
                    </div>
                    <div class="item">
                        <img src="<?php echo $img ?>" alt="<?php echo "$linha[titulo]"; ?>">
                    </div>
                </div>
        <? } } ?>

Notice that you are making the foreach repeat the <div class="carousel-inner">. In fact you need to make the foreach just repeat the block:

<div class="item">
    <img src="<?php echo $img ?>" alt="<?php echo "$linha[titulo]"; ?>">
</div>

This can be seen in the pattern where it only repeats the item:

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active">
      <img src="la.jpg" alt="Los Angeles">
    </div>

    <div class="item">
      <img src="chicago.jpg" alt="Chicago">
    </div>

    <div class="item">
      <img src="ny.jpg" alt="New York">
    </div>
  </div>

  <!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

In which the Header only appears once, to define the first div: <div class="item active"> you can use a variable counter $i:

Edit: Fix due to bug noticed by @Guilherme Nascimento. Declaring the variable counter out of the while will not cause problems and will still set the first item as active. Thanks :D

<?php
    $i = 0;
    while ($linha = $consulta->fetch(PDO::FETCH_ASSOC)) {

    $pasta = "painel/galeria/$linha[fotos]/";
    $imagens = glob("$pasta/{*.jpg,*.JPG,*.png,*.PNG}",GLOB_BRACE);
    foreach($imagens as $img){ ?>
        <?php if($i == 0) { ?>
            <div class="item active">
        <?php } else { ?>
            <div class="item">
        <?php } ?>
                <img src="<?php echo $img ?>" alt="<?php echo "$linha[titulo]"; ?>">
        </div>
    <?php $i++; ?>
    <?php } ?>
<?php } ?>

Source: https://www.w3schools.com/bootstrap/bootstrap_carousel.asp