Bootstrap Карусель с использованием l oop и мопса

Question

Я пытаюсь создать карусель, используя bootstrap и Pug. Я хочу, чтобы карусель брала изображения и данные из моей mongoDB и отображала их слайд за слайдом. Я могу получить данные без проблем, но я не могу представить их правильно. Изображения просто перечисляются или складываются на одном слайде. Я могу заставить его работать правильно, если я жестко закодирую его слайд за слайдом, но я хочу, чтобы он был динамическим c, поэтому, если что-то добавляется в БД, он автоматически создает новый слайд. Любое предложение было бы большим подспорьем. Заранее спасибо.

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