Как создать цикл по 3 слайда сразу в карусели BootstrapVue?

Код выглядит следующим образом:

<template lang="pug">
b-carousel.d-none.d-sm-block(
  id='categoryRoulette'
  controls
  no-animation
  :interval='0'
  @sliding-start="onSlideStart"
  @sliding-end="onSlideEnd"
)
  b-carousel-slide(
    v-for="category in chunkedCatalog"
    :key="category.permalink"
  )
    template(v-slot:img)
      b-card-group(deck)
        b-card(
          v-for="(item, index) in category" :key="index"
          :img-src="item.image ? item.image : '../assets/images/blank.png'"
          img-alt='Image'
          img-top
          tag='article'
        )
          b-card-text.d-flex.justify-content-center.align-items-center
            h5
              a(href="#") {{ item.title }}
</template>

<script lang="ts">
import Vue from 'vue'
import testData from '../data/testData.json'
import { RouletteData } from '../types/roulette'

export default Vue.extend({
  data: (): RouletteData => ({
    slide: 0,
    sliding: false,
    catalog: [],
  }),
  computed: {
    chunkedCatalog() {
      const chunkedArray = []

      for (let i = 0; i < this.catalog.length; i += 3) {
        chunkedArray.push(this.catalog.slice(i, i + 3))
      }

      return chunkedArray
    },
  },
  mounted(): void {
    this.catalog = testData.catalog
  },
  methods: {
    onSlideStart(slide: any) {
      this.sliding = true
      console.log('slide =', slide)
    },
    onSlideEnd(slide: any) {
      this.sliding = false
      console.log('slide =', slide)
    },
  },
})
</script>

<style lang="sass">
#categoryRoulette
  margin-bottom: 40px
  margin-top: 40px
  .carousel-control-prev-icon
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%232E86C1' class='bi bi-chevron-left' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E") !important
    height: 100px !important
    margin-left: -300px
    width: 100px !important
  .carousel-control-next-icon
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%232E86C1' class='bi bi-chevron-right' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E") !important
    height: 100px !important
    margin-right: -300px
    width: 100px !important
</style>

Нужно создать карусель, которая будет отображать 3 слайда сразу, и нажать на кнопку next/previous, чтобы отобразить следующие/предыдущие 3 слайда. Обратите внимание - нужно отображать не слайд за слайдом, а 3 слайда сразу.

Я пытался использовать массив и делать куски, но это работает только до конца массива. Например, если у меня есть 5 слайдов, он отображает сначала 3 (это нормально), а затем только 2 (это не нормально). Нажимая кнопку далее, отображаются снова первые 3 слайда и так далее.

Как должно работать? Надо отображать первые 3 слайда из 5, а при следующем щелчке надо также отображать 3 слайда - последние 2 слайда из 5 и снова первый слайд. При следующем щелчке надо отображать слайды с индексами 2, 3 и 4 и так далее.

В обратном направлении (previous) все тоже самое.