vue3 handwriting a carousel picture

<template>
  <div>
    <div class="swiper_container">
            <div :class="index==0||index==-1?'noAnimate':'animate'" class='swiper_content' ref="swiperRef" :style="{transform:`translateX(${scrollWin}px)`}">
                <div class="swiper_item" v-for="(item,index) in imgs" :key="index">
                    <img :src="item.img" alt="">
                </div>
            </div>
            <div class="dots_wrap">
                <span :class="index==idx?'active':''" class="dot" v-for="(item,idx) of imgs1.length" :key="idx"></span>
            </div>
            <span class="left_btn" @click="clickLeft">left</span>
            <span class="right_btn" @click="clickRight">right</span>
    </div>
  </div>
</template>

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

const swiperRef=ref(null)
let w=ref(800)
let scrollWin=ref(0)

const imgs1=[
    {id:"001",img:new URL("../assets/imgs/1.png",import.meta.url).href},
    {id:"002",img:new URL("../assets/imgs/2.png",import.meta.url).href},
    {id:"003",img:new URL("../assets/imgs/3.png",import.meta.url).href},
    {id:"004",img:new URL("../assets/imgs/4.png",import.meta.url).href},
    {id:"005",img:new URL("../assets/imgs/5.png",import.meta.url).href},
]
let imgs=ref([...imgs1])
// imgs.value.push(imgs1[0],imgs1[1])
const firstimg=imgs.value[0]
const lastimg=imgs.value[imgs.value.length-1]
onMounted(() => {

})
const index=ref(0)


const clickLeft=()=>{
    index.value--;
    console.log("index.value",index.value)
    
    if(index.value<=-1){

        scrollWin.value=-w.value*imgs.value.length
        console.log("w.value",w.value)
        console.log("imgs.value",imgs.value.length)
        console.log("scrollWin.value",scrollWin.value)
        setTimeout(()=>{
            index.value=4     
            scrollWin.value=-index.value*w.value;
        },0)
    }else{
         scrollWin.value=-index.value*w.value;
    }
}

const clickRight=()=>{
    index.value++;
    console.log("index.value",index.value)
    console.log("index.value",index.value)
    if(index.value>=5){
        setTimeout(()=>{
            imgs.value.push(firstimg)
            console.log("imgs---prev",imgs)
            index.value=0;
            scrollWin.value=0
            console.log("imgs--next",imgs)
        },200)
    }
    console.log("ndex.value*w.value",index.value,w.value)
    scrollWin.value=-index.value*w.value;
        // swiperRef.value.style.transform=`translateX(${w}px)`
    // debugger
}

</script>
<style scoped>
*{
    margin: 0;
    padding: 0;
}
.swiper_container{
    width: 800px;
    height: 320px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}
.swiper_content{
    display: flex;
    position: absolute;
    top:0;
    left:0;
    height: 100%;
}
.dots_wrap{
    position: absolute;
    bottom: 0;
    width: 50%;
    left:50%;
    transform: translate(-50%,-50%);
    text-align: center;
}
.swiper_item{
    width: 800px;
    margin: 0;
}
.swiper_item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
} 
.dot{
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    z-index: 1;
    background: #fff;
    margin: 0 10px;
}
.active{
    background: #f90;
}
.left_btn,.right_btn{
    display: inline-block;
    width: 60px;
    height: 42px;
    background: #000;
    color:#fff;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.left_btn{
    position: absolute;
    top:50%;
    left:20px;
    
}
.right_btn{
    position: absolute;
    top:50%;
    right:20px
}
.noAnimate{
    transition: none;
}
.animate{
    transition: all 0.2s;
}
.active{
    color:#f00
}
</style>

 

 The idea of ​​seamlessly switching between the first picture and the last picture is to add the first picture at the end of the original data, and then quickly return the entire container to the left position of 0 through scrollWin.value=0. In order to avoid the large rollback effect of the second picture at this time, we first cancel the transition animation, that is, control it through: class="index==0||index==-1?'noAnimate':'animate'" . Don't let it animate first, and then set the animation after returning to the initial position.