Manipulated image slide with database in Node.js

Asked

Viewed 80 times

0

There’s this slide of images in bootstrap, I want it to receive the images from the database (so far so good), but instead of displaying one by one it’s listing all at the same time.

that’s the 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}}

this is their respective DB, written in document oriented, in case I used 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)
javascript json node.js twitter-bootstrap mongodb

1 answer

0

You are making the loop in the whole carousel container, the loop should be only in the elements .carousel-item that you want to repeat.

You have yet to add the class active only on the first carousel item.

If your code should look like:

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

Browser other questions tagged javascript json node.js twitter-bootstrap mongodb

You are not signed in. Login or sign up in order to post.