1. This is based on HTML web-components
2. Carousel is meant to be used with at least 3 items

Example usage (Vue.js):

<fd-carousel
  id="goal-club-prize-carousel"
  mode="classic"
  is-auto-play="true"
  @slide-clicked="openPrizeModal($event)"
  @on-active-slide-changed="activeSlideChanged($event)">
  <ul
    class="fd-carousel-wrapper fd-carousel-wrapper-classic"
    slot="fd-carousel-wrapper-slot">
    <li
      v-for="(displayablePrize, iter) of displayablePrizes"
      :key="iter"
      :class="`fd-carousel-slide slide-${iter}`">
      <img
        :class="`fd-carousel-slide-image image-${iter}`"
        :src="
          getPrizeAssignmentImageUrl(displayablePrize.prizeAssignment)
        "
        :alt="displayablePrize.prizeAssignment.prize?.name" />
    </li>
  </ul>

  <span
    v-if="currentDisplayablePrize"
    class="fd-carousel-nav-item-description-wrapper"
    slot="fd-carousel-nav-item-description-slot">
    <span class="fd-carousel-nav-item-quantity">
      x{{
        formatNumber(
          currentDisplayablePrize.prizeAssignment.assignedQuantity
        )
      }}
    </span>
    <span class="fd-carousel-nav-item-description">
      {{
        translateObject(
          currentDisplayablePrize.prizeAssignment.prize,
          "name",
          "prizeAssignment"
        )
      }}
    </span>
  </span>
</fd-carousel>