CODEWITHSUNDEEP
vue.jsbootstrap-vue
tesicg
tesicg

Reputation: 4053

How to stop BootstrapVue carousel cycling?

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:

enter image description here

Upvotes: 0

Views: 1105

Answers (2)

Amit Gupta
Amit Gupta

Reputation: 11

Get the input value of timer you want to set or set conditional value as below.

    setSliderTimer: function (e) {
  var setSliderTime = document.getElementById("time-input")
  var newTimer = setSliderTime.value
  if(newTimer > 0){
    newTimer = newTimer;
  }else{
    newTimer = 3000;
  }
  this.interval = newTimer;
},

Upvotes: 0

The.Bear
The.Bear

Reputation: 5855

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
  }
})

Upvotes: 1

Related Questions