index.vue

<template>
  <MyAutoCarousel class="my-auto-carousel" orientation="horizontal-left" :duration="3">
    <li style="font-size: 540px; padding-right: 600px; background-color: green">1</li>
    <li style="font-size: 540px; padding-right: 600px; background-color: orange">2</li>
    <li style="font-size: 540px; padding-right: 600px; background-color: red">3</li>
  </MyAutoCarousel>
</template>

MyAutoCarousel.vue

<template>
  <div
    :class="['my-auto-carousel', `-${props.orientation}`]"
    role="presentation"
    :style="{
      '--direction': direction,
      '--duration': `${props.duration}s`,
    }"
  >
    <ul class="list -before" aria-hidden="true">
      <slot />
    </ul>
    <ul class="list">
      <slot />
    </ul>
    <ul class="list -after" aria-hidden="true">
      <slot />
    </ul>
  </div>
</template>

<script lang="ts" setup>
const props = withDefaults(
  defineProps<{
    orientation?: "horizontal-left" | "horizontal-right" | "vertical-top" | "vertical-bottom";
    duration?: number;
  }>(),
  {
    orientation: "horizontal-left",
    duration: 30,
  }
);

const direction = computed(() => {
  return ["horizontal-left", "vertical-top"].includes(props.orientation) ? -1 : 1;
});
</script>

<style scoped>
.my-auto-carousel {
  display: flex;
  overflow: clip;
  position: relative;
}
.my-auto-carousel.-horizontal-left,
.my-auto-carousel.-horizontal-right {
  flex-direction: row;
}
.list {
  animation: horizontal var(--duration) linear infinite;
  display: flex;
  flex-shrink: 0;
  transform: translateX(-100%);
  width: max-content;
}
.-vertical-top,
.-vertical-bottom {
  flex-direction: column;
  > .list {
    animation: vertical var(--duration) linear infinite;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    transform: translateY(-100%);
    height: max-content;
  }
}

@keyframes horizontal {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(calc(-100% + (100% * var(--direction))));
  }
}

@keyframes vertical {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(calc(-100% + (100% * var(--direction))));
  }
}
</style>