Bootstrap Carousel using loop and pug

Question

我正在尝试使用bootstrap和Pug创建一个轮播。我希望轮播从我的mongoDB中获取图像和数据，然后逐张显示。我可以毫无问题地获取数据，但是我无法以正确的方式呈现数据。图像仅列出或堆叠在一张幻灯片上。如果我逐个幻灯片对其进行硬编码，则可以使其正常工作，但是我希望它是动态的，因此，如果将某些内容添加到数据库中，它将自动创建新的幻灯片。任何建议都会有很大帮助。预先感谢。

#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

Answer 1

通过此操作将其修复，从顶部删除了.carousel-item.active，然后添加了if语句，将第一项设置为活动幻灯片

#carouselExampleControls.carousel.slide(data-ride='carousel' style ='width: 400px; height: 400px; margin: 0 auto')
    .carousel-inner
      - let values = listedGames.content
          each val, index in values ? values : ['There are no values']
            if(index === 0)
              .carousel-item.active
                p= 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")
            else     
              .carousel-item
                p= 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

Answer 2

[问题是img未被放置在carousel-item类之下。只需将li和img放在选项卡上，以便它位于carousel-item下。