vue.js – How to create infinite looping by 3 slides at once in BootstrapVue’s Carousel?

The code looks as following:

<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="https://codereview.stackexchange.com/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>

The need is to create carousel that will display 3 slides at once and click on next/previous should display next/previous 3 slides. Pay attention – I don’t need to display slide by slide (1 by 1), but 3 slides (3 by 3).

I’ve tried to use an array and make chunks, but it works until the end of array only. For example, if I have 5 slides, it displays first 3 (it’s ok) and than 2 only (it’s not ok). Click on next displays first 3 slides again and so on.

How should it work? It should display first 3 slides of 5 and on next click it should display 3 slides as well – last 2 slides of 5 and first slide again. On next click it should display slides with indexes 2, 3 and 4 and so on.