0

Tenho o seguinte código:

<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>

Ao gerar o slider com as imagens vindas da pasta, que está previamente cadastrada em um campo do banco de dados, o meu resultado é o seguinte:

inserir a descrição da imagem aqui

As imagens ficam empilhadas, ao invés de passarem uma por vez.

Já tentei trocar a localização de abrir e fechar div's, mas não tive muito sucesso.

Alguma dica?

3
  • Confira se está importando corretamente todas as dependencias do bootstrap 20/07/2018 às 14:53
  • Obrigado pela pronta resposta. Tudo ok, css e js setados corretamente. 20/07/2018 às 14:58
  • 2
    Eu não aguento! Para que negativar? Onde a pergunta é fora de escopo ou desnecessária? 20/07/2018 às 14:59

2 Respostas 2

0

É porque o teu while e o foreach estão fazendo o <div class="carousel-inner"> se repetir diversas vezes, esse elemento deve ser único para cada carousel

Outra situação ser corrigida é que a classe active deve ser adicionada somente a um elemento por vez, ou seja você pode fazer uma variavel booleana para checar se já foi adicionado, uma if inline resolve:

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

Eu também suspeito que isso seja repetição:

    <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>

E pode ser removido.

Um exemplo corrigido e adiciona a checagem para o 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>
7
0

O erro do seu código está neste trecho

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

Perceba que você está fazendo o foreach repetir a <div class="carousel-inner">. Na verdade você precisa fazer com que o foreach repita apenas o bloco:

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

Isso pode ser observado no padrão onde só repete o 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>

No qual o carrousel inner só aparece somente uma vez, para definer a primeira div: <div class="item active"> você pode usar uma variável contadora $i:

Edit: Correção devido ao bug notado pelo @Guilherme Nascimento. Declarando a váriavel contadora fora do while não ocorrerá problemas e ainda sim definirá o primeiro item como ativo. Obrigado :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 } ?>

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

3
  • Obrigado pelo seu tempo, @Marcelo. Foram duas respostas excelentes, de dois especialistas! Grato pelo seu suporte! 20/07/2018 às 16:02
  • 1
    esse $=0; não vai dar certo porque o while vai reiniciar o $i=0 para zero toda a vez, se notar ele tem o while para os imoveis e o foreach para as fotos, então é IMOVEISxFOTOS=total de fotos. Só falta isso pra melhorar e o seu código ficará perfeito :) 20/07/2018 às 16:02
  • Obrigado @GuilhermeNascimento pela dica. Já corrigi no código :D 20/07/2018 às 16:11

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .