Slider in Vue.js - vue.js

Question

My slider works just great, but when pictures are changing from one to another its jumping. It's like one pic appears under another. And then when first pic disappears, the second block jumps back to needed position. I think it would be solved with mode="in-out", but group transition doesn't have this option. It's only for single transition. Or should I try redo it with regular transition?
<template>
<div class="inner__slider">
<transition-group name="fade" tag="p">
<the-slide v-for="(item, key) in imgs"
:key="key"
:item_name="item.name"
v-show="item.id === curImg"
/>
</transition-group>
<button #click="ft_cnt(1)">Foward</button>
<button #click="ft_cnt(-1)">Downward</button>
</div>
</template>
<script>
import TheSlide from '#/components/TheSlide.vue'
export default {
name: "TheSlider",
components: {
TheSlide
},
data() {
return {
curImg: 0,
imgs:[
{
id: 0,
name: 'DiamPhoto.png'
},
{
id: 1,
name: 'Dima.png'
},
{
id: 2,
name: 'TrumpBuilding.png'
}]
}
},
methods: {
ft_cnt(i) {
this.curImg += 1;
if (this.curImg < 0)
this.curImg = Object.keys(this.imgs).length - 1;
if (this.curImg > Object.keys(this.imgs).length - 1)
this.curImg = 0;
}
}
}
</script>
And here is TheSlider component:
<template>
<div class="img">
<img :src="require('#/assets/img/' + item_name)" alt="">
</div>
</template>
<script>
export default {
name: "TheSlide",
props: {
item_name: String
}
}
</script>