https://blog.canopas.com/animations-with-css-and-vue-transitions-fdb53dbb21e7 - slider-animation-2

slider-animation-2.vue

<template>
  <div class="background text-center">
    <div class="horizontal-slider normal-text text-center">
      <div class="list-wrapper">
        <transition-group
          :name="'image-' + transitionName"
          tag="ol"
          class="list text-center"
        >
          <div
            v-for="(slide, i) in currentSlides"
            ...
          >
            ...
          </div>
        </transition-group>
      </div>
    </div>
     <div>
      <button type="button" class="indicators" @click="slide(-1)">
        <font-awesome-icon class="arrow" icon="arrow-left" id="leftArrow" />
      </button>
      <button type="button" class="indicators" @click="slide(1)">
        <font-awesome-icon class="arrow" icon="arrow-right" id="rightArrow" />
      </button>
    </div>
  </div>
</template>

<script type="module">
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
export default {
  data() {
    return {
      slides: [...],
      currentSlides: [],
      currentSlide: 0,
      transitionName: "",
    };
  },
  components: {
    FontAwesomeIcon,
  },
  methods: {
    slide(dir) {
      this.transitionName = dir === 1 ? "next" : "prev";
      this.currentSlide = this.getRoundedIndex(dir);  //image index which is showing in center
      this.refreshCurrentSlides();
    },
    // rotate array to either left or right based on currentSlide
    refreshCurrentSlides() {
      this.currentSlides.splice(
        0,
        5,
        this.slides[this.getRoundedIndex(-2)],
        this.slides[this.getRoundedIndex(-1)],
        this.slides[this.getRoundedIndex(0)],
        this.slides[this.getRoundedIndex(1)],
        this.slides[this.getRoundedIndex(2)]
      );
    },
    getRoundedIndex(diff) {
      var len = this.slides.length;
      return (this.currentSlide + diff + len) % len;
    },
  },
  mounted() {
    // initialize array with emplty elements and then refresh it with actual slides
    this.currentSlides.splice(0, 0, "", "", "", "", "");
    this.refreshCurrentSlides();
  },
};
</script>