title: Bootstrap Carousel using loop and pug
body: <p>I'm trying to create a carousel using bootstrap and Pug. I want the carousel to take images and data from my mongoDB and display it slide by slide. I can get the data no problem but I cant present it the right way. The images just list or stack on one slide. I can get it to work correctly if i hard code it slide by slide but i want it to be dynamic so if something is added to the DB it automatically creates a new slide. Any suggestion would be a big help. Thanks in advance.</p>
  
  <pre><code>#carouselExampleControls.carousel.slide(data-ride='carousel' style ='width: 400px; height: 400px; margin: 0 auto')
      .carousel-inner
        .carousel-item.active
                - let values = listedGames.content
                    each val in values ? values : ['There are no values']
                      .carousel-item
                      li= JSON.stringify(val.title) + ' created by ' + JSON.stringify(val.creator) + '('+ JSON.stringify(val.year) +')'
                      img.d-block.w-100(src=val.url, alt="Image Title")
  
      a.carousel-control-prev(href='#carouselExampleControls' role='button' data-slide='prev')
          span.carousel-control-prev-icon(aria-hidden='true')
          span.sr-only Previous
      a.carousel-control-next(href='#carouselExampleControls' role='button' data-slide='next')
          span.carousel-control-next-icon(aria-hidden='true')
          span.sr-only Next
  </code></pre>