Ir ao conteúdo

Posts recomendados

Postado

@DiF Eu queria fazer isso sem usar PHP, ainda não sei mexer com isso, agora no caso, sem utilizar PHP, é só pegar o trecho do codigo que ta com as fotos, e copiar eles até quantos eu quiser né? ai inserir fotos diferentes, tipo assim: 

<div class="container">
         <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
       <ol class="carousel-indicators">
         <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
         <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
         <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
       </ol>
       <div class="carousel-inner">
         <div class="carousel-item active">
           <img class="d-block w-100" src="bannerg2.jpg" alt="First slide">
         </div>
         <div class="carousel-item">
           <img class="d-block w-100" src="casa1.jpg" alt="Second slide">
         </div>
         <div class="carousel-item">
           <img class="d-block w-100" src="CASA DUPLA 33.jpg"  alt="Third slide">
         </div>
       </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>

Esse acima é o código do Slide, no caso, eu irei copiar esse trecho aqui né?

 <div class="carousel-item">
           <img class="d-block w-100" src="casa1.jpg" alt="Second slide">
         </div>

Se for isso mesmo, eu preciso alterar alguma coisa? Ou apenas fazer esse procedimento!?

  • Moderador
Postado

@RockMagicRevived

Então, pela estrutura, é notório que o bloco de elemento DIV com a classe carousel-item é um um item do carousel.

Dito isso, se você duplicar, triplicar, quadruplicar este bloco  irá aumentar o número de elementos do seu carousel.

 

Mas não é só isso, você precisa também alterar o número de elementos <li> contendo valor id de cada slide..

 

<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>

 

6 minutos atrás, RockMagicRevived disse:

Eu queria fazer isso sem usar PHP, ainda não sei mexer com isso, agora no caso, sem utilizar PHP

Como disse anteriormente, se forem poucas imagens e/ou ser apenas um estudo podes fazer tranquilamente com eles estáticos.

Porém se for para um trabalho, um site a ser publicado, o ideal é usar a linguagem de programação server-side para dar o dinamismo, sem ter que escrever zilhões de linhas

  • Obrigado 1
  • Moderador
Postado

@RockMagicRevived Então como eu disse. se forem POUCAS imagens, você pode fazer assim... caso contrário você DEVE usar a linguagem de programação, a não ser que tenhas paciência de colocar por exemplo 50 blocos do item do carousel.

 

Uma coisa você precisa pensar: Para que tentar fazer girar um quadrado, se a roda gira melhor?

isso é praticamente a mesma coisa.  Com poucas imagens você pode fazer na "unha", sem contar que podes até utilizar a linguagem client-side como o javascript e gerar um array de imagens... enfim...

 

Ratificando que disse mais cedo e agora,  com poucas imagens você pode colocar de forma estática.  Porque não teste? Copie e cole os blocos alterando as imagens... 

As vezes é muito mais prático você entender praticando do que lendo.

  • Obrigado 1

Crie uma conta ou entre para comentar

Você precisa ser um usuário para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×
×
  • Criar novo...

LANÇAMENTO!

eletronica2025-popup.jpg


CLIQUE AQUI E BAIXE AGORA MESMO!