image_carousel.pug

// mixin to construct a carousel from a list of images
mixin image_carousel(image_files, carouselName='imgCarousel', modalId=null)
  .carousel.carousel-fade.slide(
    id=carouselName,
    data-bs-ride="carousel",
    style=modalId == null ? null : 'cursor:pointer;',
    data-bs-interval="2500",
    data-bs-toggle=modalId == null ? null : 'modal',
    data-bs-target=modalId
  )
    if (modalId == null)
      .carousel-indicators
        each image_file, index in image_files
          button(
            class=index == 0 ? 'active' : null,
            type="button",
            data-bs-target=`#${carouselName}`,
            data-bs-slide-to=index,
            aria-current="true",
            aria-label=image
          )
    .carousel-inner.img
      each image_file, index in image_files
        .carousel-item(class=index == 0 ? 'active' : null)
          picture
            - const split_image_file = image_file.split('.');
            if split_image_file[1] == "png"
              source(
                srcset='assets/' + split_image_file[0] + '.webp',
                type="image/webp"
              )
            img.d-block.mx-auto.w-100(
              src='assets/' + image_file,
              alt=image_file
            )
    if (modalId == null)
      button.carousel-control-prev(
        type="button",
        data-bs-target=`#${carouselName}`,
        data-bs-slide="prev"
      )
        span.carousel-control-prev-icon(aria-hidden="true")
        span.visually-hidden Previous
      button.carousel-control-next(
        type="button",
        data-bs-target=`#${carouselName}`,
        data-bs-slide="next"
      )
        span.carousel-control-next-icon(aria-hidden="true")
        span.visually-hidden Next