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?
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.