Vue3 transition-group not working as expected - html

Question

I am new to Vue in general and working on a project with a carousel that will show the different images fine, but the transition is not working as expected. Each time a new image shows, the transition has some style that has it go from the bottom left corner to the center. Any suggestions on how to make it slide like a carousel similar to https://www.jssor.com/demos/full-width-slider.slider without the buttons on the sides?
I know that when my images change that the .fade-move css class gets applied, but I can't find the right combo to make the current slide go out left and bring the next slide in from the right. If I add the styling to all div's div {transition: all 2s ease);}, then it will "transition", but I can't figure out why it's starting from the bottom right corner.
<script setup lang="ts">
let slides = ref(
[
{
url: x.svg,
title: "test 1",
id: 0,
},
{
url: y.svg,
title: "test 2",
id: 1,
},
{
url: z.svg,
title: "test 3",
id: 2,
},
]
);
let GREENCIRCLE = green.svg;
let WHITECIRCLE = white.svg;
let active = ref(0);
function next () {
active.value = (active.value + 1) % slides.value.length
}
onMounted(() => {
window.setInterval(next,4000);
})
</script>
<template>
<div class='carousel-view'>
<transition-group
class='carousel'
tag="div"
name="fade">
<div class="slide-container"
v-for="slide, idx in slides"
:key="slide.id"
>
<div
class='slide'
v-if="idx===active">
<img :src="slide.url" />
<h3> {{ slide.title }} </h3>
</div>
</div>
</transition-group>
<div class="links-container">
<a class="carousel-links"
#click="active=idx"
v-for="slide, idx in slides"
:key="slide.id">
<img
class="carousel-controls"
:src="idx === active ? GREENCIRCLE : WHITECIRCLE"
/>
</a>
</div>
</div>
</template>
<style scoped>
/* carousel effect */
div {
transition: all 2s ease;
}
.fade-move {
transform: translateX(100%);
transition: transform 3s ease-in-out;
}
</style>