Vue carousel autoplay do not stop on flag change

3k views Asked by At

I want a carousel to be autoplaying untile the user clicked on a dropdown where the carousel go to that option slide, and the autoplay should stop.

The only thing i can't make work is stoping the autoplay, i have vue devtools installed and it show in the carousel component that when i select an option in my dropdown the flag for the autoplay changes its value using the value that i pass in the doAutoplay prop, . I am using ssense vue-carousel like this

//Vue imports
....
import VueCarousel from 'vue-carousel';
Vue.use(VueCarousel);

and in the template

<carousel :loop="true" :per-page="1" :autoplay="doAutoplay" :autoplay-timeout="4000" :pagination-enabled="false" :mouse-drag="false" :navigate-to="sede == '' ? 0 : sede" :autoplay-hover-pause="false">
    <slide>
        <img :src="$asset('images/backgrounds/background1.jpg')">
    </slide>
    ....
    //more slides
</carousel>

And this is the dropdown

<md-field>
    <md-select v-model="sede" name="sede" id="sede">
        <md-option :value="index" v-for="(s, index) in sedes" :key="index">{{ s.name }}</md-option>
    </md-select>
</md-field>

The rest

export default {
    data : () => {
        return {
            ...
            sede     : '',
            sedeData : {},
            sedes    : [],
            doAutoplay : true
        }
    },
    created : function(){

        axios.get(this.$asset('api/inicio')).then((response) => {
            this.sedes      = response.data.sedes;//this is the data for the dropdown
        }).catch(() => {
        });

    },
    watch : {
        sede(){
            //i watch the dropdown for changes, if it does, i reevaluate the doAutoplay prop.
            this.doAutoplay = false;
            this.sedeData = this.sedes[this.sede];
        }
    }

}

Why is the autoplay not stoping after its value change to false? how can i solve this?

1

There are 1 answers

3
Bennett Dams On BEST ANSWER

The property list at Github doesn't include an autoplay property , which is why the carousel doesn't stop.

Nevertheless there is a speed property, you could set to 0 when the dropdown is opened and put it back to a value >0 when the dropdown is closed.

EDIT: Strangely there is an autoplay option in the official docs but not in the property list at GitHub.