Having trouble getting my slider animation to work. I've tried different CSS styles but the slide transition is not functioning as expected. When one of the buttons is clicked, I want the slide to change from right to left or left to right. Can anyone point out what might be wrong? Check it out here
<template>
<div class="sliderComponent">
<transition-group name="slide" tag="div" >
<div v-for="(item, id ) in items" :key="id">
<img :src="currentImage" title="image" :alt="item.id" class="slideImage">
</div>
</transition-group>
<div class="controls">
<button class="prev" @click="prevSlide">d</button>
<button class="next" @click="nextSlide">b</button>
</div>
</div>
</template>
______________
<style>
.slideImage {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
}
.slider-enter-active,
.slider-leave-active {
transition: transform 0.5s;
}
.slider-enter,
.slider-leave-to {
transform: translateX(-100%);
}
</style>