I am in the process of creating a custom image slider with vuex and I would like to assign a specific class to the navigation dots used for sliding through the images. When a dot is active, it should have a class called dotActive. I intend to use the activeSlider variable for this purpose.
Below is the code snippet for the slider component:
<template>
<section class="slider_maincontainer">
<transition-group name="slider-fade">
<div class="slider_item" v-show="activeSlider===1" style="background-color:red;">
<!--slider content-->
</div>
<div class="slider_item" v-show="activeSlider===2" style="background-color:blue;">
<!--slider varied content-->
</div>
<div class="slider_item" v-show="activeSlider===3" style="background-color:green;">
<!--another slider-->
</div>
</transition-group>
<button class="slider_buttom_prev" @click="prevSlider()">
<i class="slider_buttom_icon fas fa-angle-left"></i>
</button>
<button class="slider_buttom_next" @click="nextSlider()">
<i class="slider_buttom_icon fas fa-angle-right"></i>
</button>
<div class="slider_dots_container">
<span :class="{ 'dotActive': index === activeSlider }"
class="slider_dots_dot"
v-for="(slider, index) in slidersCount"
:key="index"
@click="goToSlider(slider)"></span>
</div>
</section>
</template>
<!--SCRIPTS-->
<script>
import { mapState, mapActions } from 'vuex'
export default {
name: 'MainSlider',
computed:{
...mapState('MainSlider', ['activeSlider', 'slidersCount']),
},
mounted() {
console.log(this.$options.name+' component successfully mounted');
this.startSlider();
},
methods:{
...mapActions('MainSlider', ['nextSlider', 'prevSlider']),
}
};
</script>And here is my Slider Store:
//STATE
const state = {
slidersCount: 3,
sliderInterval: 3000,
activeSlider: 1,
}
//GETTERS
const getters = {
}
//ACTIONS
const actions = {
prevSlider ({ commit, state }) {
if(state.activeSlider == 1){
commit( 'TO_LAST_SLIDER' );
}
else{
commit( 'PREV_SLIDER' );
}
},
nextSlider ({ commit, state }) {
if(state.activeSlider == state.slidersCount){
commit( 'TO_FIRST_SLIDER' );
}
else{
commit( 'NEXT_SLIDER' );
}
},
goToSlider ({ commit, sliderIndex }) {
commit('GO_TO_SLIDER', sliderIndex)
},
}
//MUTATIONS
const mutations = {
PREV_SLIDER (state) {
state.activeSlider--;
},
NEXT_SLIDER (state) {
state.activeSlider++;
},
GO_TO_SLIDER (state, sliderIndex) {
state.activeSlider = sliderIndex;
},
TO_FIRST_SLIDER (state) {
state.activeSlider = 1;
},
TO_LAST_SLIDER (state) {
state.activeSlider = state.slidersCount;
},
}
export default {
namespaced: true, state, getters, actions, mutations
}I realize that this could be simplified by associating each DOM slider with an object and using a v-for loop. However, as far as I know, I cannot do this with raw DOM elements since I am not fetching the slider images from a backend source.