Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
5
respostas

Slideshow com imagens vindas do banco

por MATHEUS HENRIQUE
| 52.5k xp | 98 posts

Boa tarde galera. O código abaixo é responsável por mostrar na tela um slideshow, porém funciona caso eu adicione imagens 1 a 1. O que eu gostaria de fazer é receber os nomes das imagens que estão na base de dados e montar um loop e exibir todas as imagens, porém ele exibe uma imagem em cima da outra. Segue o código.

<!DOCTYPE html>
<html>
   <head>
      <meta name="viewport" content="width=device-width, initial-scale=1">
   </head>
   <body>
      <div class="container-fluid">
         <div class="side-body">
            <br><br>
            <fieldset>
               <legend>Minhas Imagens</legend>
               <?php foreach($imagens as $img): ?>
               <div id="myCarousel" class="carousel slide" data-ride="carousel">
                  <!-- Indicators -->

                  <ol class="carousel-indicators">
                     <li data-target="#myCarousel" data-slide-to=<?=$img["id_img"]?> class="active"></li>
                  </ol>
                  <!-- Wrapper for slides -->

                  <div class="carousel-inner">

                     <div class="item active">
                        <img src=<?= base_url("imagens/").$img["nome_img"]?> style="width:100%;">
                     </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>
                  <?php endforeach; ?>
               </div>
         </div>
      </div>
      </fieldset>
   </body>
</html>
5 respostas
por Wanderson Macêdo
| 3964.9k xp | 8086 posts
Instrutor Desenvolvedor

Matheus, tudo bem? Você está usando algum framework ou coisa do tipo?

Segundo, olha que você está adicionando a classe active para todos os slides, acho que isso faz o problema que você comenta acontecer.

Acho que fazer um simples if para verificar a primeira imagem pode resolver o seu problema.

por MATHEUS HENRIQUE
| 52.5k xp | 98 posts

Ola, tudo bem e você? Obrigado pelo retorno, sim uso codeigniter, no caso do if eu poderia fazer pela id da imagem correto?

solução!
por Wanderson Macêdo
| 3964.9k xp | 8086 posts
Instrutor Desenvolvedor

Não, o id é uma coisa dinâmica e você não tem muito controle sobre isso. Você pode fazer um if no índice do array para verificar se é 0, que é o primeiro item. Assim você teria:

<?php foreach($imagens as $indice => $img): ?>
   <div id="myCarousel" class="carousel slide" data-ride="carousel">
      <div class="carousel-inner">
         <?php if($indice == 0): ?>
            <div class="item active">
               <img src=<?= base_url("imagens/").$img["nome_img"]?> style="width:100%;">
            </div>
            <?php else: ?>
               <div class="item">
                  <img src=<?= base_url("imagens/").$img["nome_img"]?> style="width:100%;">
               </div>
         <?php endif; ?>
      </div>
   </div>
<?php endforeach; ?>

Você precisa fazer a mesma coisa para os indicators, que estão todos ativos

por MATHEUS HENRIQUE
| 52.5k xp | 98 posts

Boa tarde. Wanderson, muito obrigado pela ajuda, segue a solução final caso alguém necessite. Obrigado mesmo, abraços.

<!DOCTYPE html>
<html>
   <head>
      <meta name="viewport" content="width=device-width, initial-scale=1">
   </head>
   <body>
      <div class="container-fluid">
         <div class="side-body">
            <br><br>
            <fieldset>
               <legend>Minhas Imagens</legend>

               <div id="myCarousel" class="carousel slide" data-ride="carousel">

                  <!-- Indicators -->
                  <ol class="carousel-indicators">
                     <?php foreach($imagens as $indice => $img): ?>
                     <?php if($indice == 0): ?>
                        <li data-target="#myCarousel" data-slide-to=<?php echo $indice?> class="active"/>
                     <?php else: ?>
                        <li data-target="#myCarousel" data-slide-to=<?php echo $indice?> />
                     <?php endif; ?>
                     <?php endforeach; ?>
                  </ol>
                  <!-- Wrapper for slides -->

                  <div class="carousel-inner">
                     <?php foreach($imagens as $indice => $img): ?>
                     <?php if($indice == 0): ?>
                        <div class="item active">
                           <img src=<?= base_url("imagens/").$img["nome_img"]?> style="width:100%;">
                        </div>
                        <?php else: ?>
                           <div class="item">
                              <img src=<?= base_url("imagens/").$img["nome_img"]?> style="width:100%;">
                           </div>
                     <?php endif; ?>
                     <?php endforeach; ?>
                  </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>

         </div>
      </div>
      </fieldset>
   </body>
</html>
por Wanderson Macêdo
| 3964.9k xp | 8086 posts
Instrutor Desenvolvedor

Opa Matheus, que bom que ajudou! Obrigado você por compartilhar a solução completa aqui. Abraço e bons estudos!