0

Tem esse slide de imagens em bootstrap, quero que ele receba as imagens do banco de dados(até ai tudo bem), mas invés de exibir uma por uma ele esta listando todas ao mesmo tempo.

esse é o slide:

{{#each Carousel}}
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="{{imgCarousel}}" class="d-block w-100" >
       <h5>{{textCarousel}}</h5>
    </div>
    <div class="carousel-item">
      <img src="{{imgCarousel}}" class="d-block w-100" >
       <h5>{{textCarousel}}</h5>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleFade" 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="#carouselExampleFade" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
{{else}}
<p>no image</p>
{{/each}}

esse é seu respectivo DB, escrito em orientado a documento, no caso usei o mongolDB:

const mongoose = require('mongoose')
const Schema = mongoose.Schema

const Carousel = new Schema({
    imgCarousel:{
        type: String,
        required: true
    },
    textCarousel:{
        type: String,
        required: true
    }
})
mongoose.model("carousel",Carousel)
1

1 Resposta 1

0

Você está fazendo o loop no container todo do carrossel, o loop deve ser somente nos elementos .carousel-item que você deseja repetir.

Você tem ainda que adicionar a classe active somente no primeiro item do carrossel.

Caso seu código deverá ser parecido com:

<div id="carouselExampleFade" class="carousel slide carousel-fade">
  <div class="carousel-inner">
    {{#each Carousel}}
    <div class="carousel-item {{if @index '0' 'active'}}">
      <img src="{{imgCarousel}}" class="d-block w-100" alt="...">
      <h5>{{textCarousel}}</h5>
    </div>
    {{/each}}
  </div>
  <a class="carousel-control-prev" href="#carouselExampleFade" 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="#carouselExampleFade" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

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 .