vue.js实现循环轮播图（点击小图显示大图效果）

需求

最近有一个新需求，当右边点击小图的时候，左边要显示点击的对应的信息或者图片，并且顺序一定是1-2-3-4-5-6-7连接的这种。当点击第4张小图的时候的顺序应该为 4-5-6-7-1-2-3。
效果如图所示：

要实现的效果：

实现代码如下：

<template>
    <div id="text">
        <div class="text-box">
            <div class="showbox">
                <img :src="clickedImg" alt="img" />
            </div>
            <div class="box">
                <div v-for="(item, index) in images" :key="index" @click="handleClick(index)">
                    <span>{
   {
   item.index}}</span>
                    <img :src="item.img" alt="img" />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
   
    name: 'TriangleBox',
    data() {
   
        return {
   
            images: [
                {
   img: require('@/static/images/m_third_Bicon1.png'), index: 1},
                {
   img: require('@/static/images/m_third_Bicon2.png'), index: 2},
                {
   img: require('@/static/images/m_third_Bicon3.png'), index: 3},
                {
   img: require('@/static/images/m_third_Bicon4.png'), index: 4},
                {
   img: require('@/static/images/m_third_Bicon5.png'), index: 5},
                {
   img: require('@/static/images/m_third_Bicon6.png'), index: 6},
                {
   img: require('@/static/images/m_third_Bicon7.png'), index: 7},
            ],
            clickedImg: require('@/static/images/m_third_Bicon1.png'),
        }
    },
    methods: {
   
        handleClick(index) {
   
            this.clickedImg = this.images[index].img;
            // 获取到之前的数组
            const befores = this.images.splice(0,index);
            //这一步是插入
            this.images.push(...befores);
        }
    }
}
</script>

<style lang="scss" scoped>
#text {
   
    padding: 90px 0;
}

.text-box {
   
    width: 100%;
    max-width: 732px;
    margin: 0 auto;
    overflow: hidden;
}
</style>

<style lang="scss" scoped>
.box {
   
    display: flex;
    flex-wrap: wrap;
    width: calc(100% / 3);
    position: relative;
}