How to stop BootstrapVue carousel cycling?

Question

I've tried this:

<template lang="pug">
  b-carousel(
    id='categoryRoulette'
      controls
      no-animation
      ref="myRoulette"
  )

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  mounted(): void {
    this.$refs.myRoulette.pause()
  },

But, I've got the following error:

Answer 1

From bootstrap-vue docs:

To pause the carousel from auto sliding, set the interval prop to 0. To restart a paused carousel, set the interval back to the desired number of ms.

CHECK THIS DEMO: https://jsfiddle.net/me3610uy/3/

<b-carousel v-model="slide" :interval="interval" >
  // your content here
</b-carousel>

new Vue({
  //...
  data() {
    return {
      slide: 0,
      interval: 3000
    }
  },
  mounted() {
    this.interval = 0; // Set the interval variable to zero to pause the carousel
  }
})