Рефакторинг карусели мопса, чтобы быть более общим

Question

так что у меня есть карусель в мопсе, но она подходит только для работы с изображениями.Я хочу иметь возможность вызывать миксин карусели и иметь блок под ним, который будет содержать код pug для описания содержимого слайда.Это делает карусель более гибкой и удобной в использовании.Тем не менее, я не мог найти способ сделать это, кроме как путем выставления некоторой разметки карусели при вызове mixin, что нежелательно.Есть ли способ реализовать ситуацию, описанную мной выше?

************************ ЧТО Я РАБОТАЛ ************************

carousel.pug

mixin carousel(carouselItems)
  .carousel
    button.carousel-button.carousel-button-left
      i.fas.fa-chevron-left.fa-3x
    .carousel-track-container
      ul.carousel-track
        block
    button.carousel-button.carousel-button-right
      i.fas.fa-chevron-right.fa-3x
    .carousel-nav
      button.carousel-indicator.carousel-indicator-current
      //- custom mixin that repeats the block below its call n times
      +loop(carouselItems.length-1)
        button.carousel-indicator

index.pug

extend base-pages/base-default
include components/carousel

block localVariables
  -
    //- page-specific head configurations
    const localHeadProps = {
      title: 'Finest Clothing Store - Wear Clothes of Deluxe Calibur.',
      description: 'Our store sells clothes so elegant and high-quality that you will be turning heads!',
      keywords: 'shirt, pant, hats, shoes, style',
      //- paths of the stylesheets to use for this page
      stylesheetPaths: [
        'https://fonts.googleapis.com/css?family=Nunito',
        'css/styles.min.css',
      ]
    };

  ...more variables

  -
    //- items to use for testimonial carousel
    const testimonialItems = [
      {
        img: 'folded-shirt-closeup.jpg',
        alt: 'Folded Shirt Closeup'
      },
      {
        img: 'stacked-jeans.jpg',
        alt: 'Stacked Jeans'
      },
      {
        img: 'suits.jpg',
        alt: 'Suits'
      },
    ]

//- ---------------- MARKUP FOR PAGE ----------------

append main
  section#testimonials.testimonials
    .container
      h2 Here's what our folks have to say!
      +carousel(testimonialItems)
        block slides
          mixin slideContent(item)
            //- This can be whatever you want
            +image(item.img, item.alt)
          //- assign current-slide class to first slide,
          //- but the rest will not
          each item, index in testimonialItems
            if index === 0
              li.carousel-slide.carousel-slide-current
                +slideContent(item)
            else
              li.carousel-slide(item)
                +slideContent(item)

В случае, если вы хотите знать, что является базовой страницей, индекс являетсярасширение, вот оно:

base-page.pug

include ../abstracts/variables
include ../abstracts/mixins
include layout/head
include layout/navbar

block localVariables

doctype html
html(lang='en')
  +head(globalHeadProps, localHeadProps)
  body
    block content
      block header
        header
          +navbar(navbarItems)
          button.back-to-top-btn.btn-primary.btn-large
            i.fas.fa-arrow-circle-up
      block main
        include layout/hero
      block footer
        include layout/footer
    block scripts
      if scriptPaths
        each scriptPath in scriptPaths
          script(src=scriptPath type='text/javascript')

************************ ЧТО Я ХОЧУ ОСУЩЕСТВЛЯТЬ ************************

index.pug

extend base-pages/base-default
include components/carousel

block localVariables
  -
    //- page-specific head configurations
    const localHeadProps = {
      title: 'Finest Clothing Store - Wear Clothes of Deluxe Calibur.',
      description: 'Our store sells clothes so elegant and high-quality that you will be turning heads!',
      keywords: 'shirt, pant, hats, shoes, style',
      //- paths of the stylesheets to use for this page
      stylesheetPaths: [
        'https://fonts.googleapis.com/css?family=Nunito',
        'css/styles.min.css',
      ]
    };

  ...more variables

  -
    //- items to use for testimonial carousel
    const testimonialItems = [
      {
        img: 'folded-shirt-closeup.jpg',
        alt: 'Folded Shirt Closeup'
      },
      {
        img: 'stacked-jeans.jpg',
        alt: 'Stacked Jeans'
      },
      {
        img: 'suits.jpg',
        alt: 'Suits'
      },
    ]

//- ---------------- MARKUP FOR PAGE ----------------

append main
  section#testimonials.testimonials
    .container
      h2 Here's what our folks have to say!
      +carousel(testimonialItems)
        +img(href=item.img alt=item.alt)