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

slider-animation-1.vue

<template>
  <div class="background text-center">
    <div class="horizontal-slider normal-text text-center">
      <div class="list-wrapper">
        //For dynamic transition name, used transition name like 'image-' +
        transitionName,
        <transition-group
          :name="'image-' + transitionName"
          tag="ol"
          class="list text-center"
        >
          <div
            v-for="(slide, i) in slides"
            :key="slide"
            class="image-item"
            :class="
              'image-item-' + Math.abs(i - (currentSlides.length - 1) / 2)
            "
          >
            <img
              :src="slide.image"
              alt="slide"
              draggable="false"
              loading="lazy"
            />
          </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: [
        {
          id: "slide-1",
          image: require("@/assets/images/lisa.webp"),
        },
        {
          id: "slide-2",
          image: require("@/assets/images/marcus.webp"),
        },
        {
          id: "slide-3",
          image: require("@/assets/images/jake.webp"),
        },
        {
          id: "slide-4",
          image: require("@/assets/images/maor.webp"),
        },
        {
          id: "slide-5",
          image: require("@/assets/images/ramasis.webp"),
        },
        {
          id: "slide-6",
          image: require("@/assets/images/jimmy.webp"),
        },
      ],
      currentSlides: [],
      currentSlide: 0,
      transitionName: "",
    };
  },
  components: {
    FontAwesomeIcon,
  },
};
</script>

<style lang="scss" scoped>
.background {
  padding: 6% 0;
}

.horizontal-slider {
  margin: 50px auto 0;
  width: 60%;
}

.list-wrapper {
  position: relative;
  width: 100%;
  padding-top: 15%;
}

.list {
  position: absolute;
  width: 100%;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 0;
}

.image-item {
  border-radius: 50%;
  position: relative;
  margin: 0 15px;
  background: linear-gradient(180deg, #ff9472 0%, #f2709c 100%);
}

.image-item > img {
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 5px solid transparent;
}

.image-item-0 {
  opacity: 1;
  width: 15%;
  padding-top: 15%;
}

.image-item-1 {
  opacity: 0.4;
  width: 12%;
  padding-top: 12%;
}

.image-item-2 {
  opacity: 0.15;
  width: 9%;
  padding-top: 9%;
}

.indicators {
  background: none;
  border: none;
}

.arrow {
  border: 1px solid rgba(61, 61, 61, 0.15);
  border-radius: 15px;
  height: 45px;
  width: 45px;
  padding: 10px;
  color: #f2709c;
}
</style>