Carousel Bootstrap with images coming from server folder

0

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 field of the database, my result is as follows:

Images are stacked, instead of passing them one at a time.

I've tried changing the location of opening and closing div's, but I have not had much success.

Any tips?

    
asked by anonymous 20.07.2018 / 16:47

2 answers

0

It's because your while and foreach are doing <div class="carousel-inner"> if you repeat multiple times, this element must be unique for each carousel

Another situation to be corrected is that the active class 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, if inline resolves:

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

I also suspect this to be 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 it can be removed.

A corrected example and adds the check for the 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>
    
20.07.2018 / 17:41
0

The error of your code is in this section

       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"> . Actually you need to make 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 inner carusel appears only once, to define the first div: <div class="item active"> you can use a counter variable $ i:

Edit: Correction due to bug noticed by @Guilherme Nascimento. Declaring the countable variable 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: link

    
20.07.2018 / 17:57