我试图从右向左滑动图像系列，我希望相同的图像重复无限和均匀滑动。
例如，如果1、2、3、4、5是图像，

when 1st slide happens, the series of images should be 

2, 3, 4, 5, 1

when 2nd slide happens, the series of images should be 

3, 4, 5, 1, 2

when 3rd slide happens, the series of images should be

4, 5, 1, 2, 3

and so on and so forth

字符串
为了解决Vuejs的这个问题，这是我的源代码

<script setup lang="ts">
import {ref, onMounted, } from "vue";

let 
  imgs = ref<string[]>(['c1.png','c2.png','c3.png','c5.png','c6.png','c7.png']), 
  imgsref = ref<HTMLDivElement[]>([]) 
;

function translateFunction(el: HTMLDivElement,distance: string) {
  el.style.transform="translateX("+distance+")";
  el.style.transition=" all 2s";
}

onMounted(() => {
  
  let counter2 = 0, started = false, transitionend = false, counter1 = 0, i = 0, el = (document.getElementById("world") as HTMLDivElement), done = false;

  setInterval(() => {
    console.log(done+' '+transitionend+' '+started)
    if(done && transitionend && started === false) {
      let distance = -1*(
    (imgsref.value[i] as HTMLImageElement).offsetWidth+10 
    + 
    (imgsref.value[i-1] as HTMLImageElement).offsetWidth+10
      );
      translateFunction(el, distance + 'px');
      el.style.transition =" all 2s";
      left.value = -1*((imgsref.value[i-1] as HTMLImageElement).offsetWidth+10);
      left.value = 0
      el.scrollLeft = 0
      imgs.value.splice((i-1), 1);
      i--;
      counter1 = 0;
      started = true;
      counter2 = 0;
    }
    if(started === true) counter2++;
    console.log(counter2)
    if(counter2 === 50) {
      done = false;
      transitionend = false;
    }
  }, 10);

  setInterval(() => {
    if(done === false) {
      console.log('first');
      //left.value = 0;
      let distance = -1*((imgsref.value[i] as HTMLImageElement).offsetWidth+10);
      translateFunction(el, distance + 'px');
      el.style.transition =" all 2s";
      console.log("sliding...")
      i++;
      imgs.value.push(imgs.value[i-1]);
      done = true;
      started = false;
      counter2 = 0;
    }
    if(transitionend === false) counter1++;
    if(counter1 === 5 && done === true) {
      transitionend = true;
      console.log('transition ended')
    }
    console.log(counter1);
  }, 1000);
});
</script>

<template>
  <div class="w-100" style="background-color:black;border-bottom:1px solid #fff;padding:100px 0 100px 90px">
    <div class="w-100 h-100" style="overflow:hidden;">
      <div id="world" class="h-100">
        <ul
          class="list-style-none flex-box flex-direction-row p-0 h-100 w-100 m-0 flex-nowrap justify-content-start align-items-center"
        >
          <li 
            v-for="(img, i) in imgs" 
            :key="i+'WORLD-IMAGES'" 
            class="align-self-stretch"
            :ref="(el) => imgsref[i] = (el as HTMLLIElement)"
          >
            <div class="d-block" style="(i>0)?'padding-left:10px;padding-right:10px;':'padding-right:10px;'">
              <a class="d-block underline-none">
                <img :src="'./src/assets/images/'+img" class="h-100" />
              </a>
              <span class="d-block" style="padding:30px 0;color:#fff;">Dolce&Gabbana: a future under the banner of sustainability</span>
              <a style="padding-bottom:30px;color:#fff;" class="underline-none">
                DISCOVER MORE
              </a>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<style scoped>
.list-style-none {
  list-style: none;
} 
.flex-box {
  display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox; /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
.flex-direction-row {
  -ms-flex-direction: row !important;
  flex-direction: row !important;
} 
.p-0 {
  padding: 0;
} 
.h-100 {
  height: 100%;
} 
.w-100 {
  width: 100%;
} 
.m-0 {
  margin: 0;
} 
.flex-nowrap {
  -ms-flex-wrap: nowrap !important;
  flex-wrap: nowrap !important;
} 
.justify-content-start {
  -ms-flex-pack: start !important;
  justify-content: flex-start !important;
} 
.align-items-center {
  align-items: center !important;
}
.d-block {
  display: block;
}
</style>

型
当我测试代码时，图像切换的位置正是我想要的，但过渡并不容易动画。
我试着改变秒数，希望它能工作，但它不顺利动画。
请帮助我解决这个问题。