vue+轮播_vue实现div轮播效果

<template>
<div class="boxItem">
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="item in list">
                <div class="miao-box">
                    <img class="miao-img" :src=item.img alt="">
                    <div class="miao-item">
                        <div class="label">拍摄时间:</div>
                        {{item.time}}
                    </div>
                </div>
                <div class="miao-box1">
                    <div class="miao-item">
                        <div class="label">设备编号:</div>
                        {{item.num}}
                    </div>
                    <div class="miao-item miao-item1">
                        <div class="label">设备状态:</div>
                        {{item.state}}
                    </div>
                    <div class="miao-item">
                        <div class="label">地理坐标:</div>
                        {{item.coordinate}}
                    </div>
                    <div class="miao-item">
                        <div class="label">设备位置:</div>
                        {{item.position}}
                    </div>
                </div>
            </div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
    </div>
</div>
</template>
 
<script>
    export default {
        name: "seedlingGrowth",
        data(){
            return{
                swiper:'',
                list:[
                    {
                        img:require('../../../../img/planting/siqing/miao1.png'),
                        num:'011',
                        state:'在线',
                        coordinate:'23°26′21.448″N',
                        position:'泊里镇012号农田',
                        time:'2023-05-06'
                    },{
                        img:require('../../../../img/planting/siqing/miao2.png'),
                        num:'012',
                        state:'在线',
                        coordinate:'23°26′21.448″N',
                        position:'泊里镇012号农田',
                        time:'2023-05-06'
                    },{
                        img:require('../../../../img/planting/siqing/miao1.png'),
                        num:'013',
                        state:'在线',
                        coordinate:'23°26′21.448″N',
                        position:'泊里镇012号农田',
                        time:'2023-05-06'
                    },{
                        img:require('../../../../img/planting/siqing/miao2.png'),
                        num:'014',
                        state:'在线',
                        coordinate:'23°26′21.448″N',
                        position:'泊里镇012号农田',
                        time:'2023-05-06'
                    },
                ]
            }
        },
        methods:{
            mySwiper(){
                this.swiper = new Swiper('.swiper-container', {
                    pagination: '.swiper-pagination',
                    slidesPerView: 2,
                    paginationClickable: true,
                    spaceBetween: 10,
                    autoplay: 5000, //时长
                    autoplayDisableOnInteraction: false, //点击不会取消自动
                });
            }
        },
        mounted() {
            this.mySwiper()
        },
        beforeDestroy() {
 
        }
    }
</script>
 
<style lang="scss" scoped>
.swiper-container{
    width: 22vw;
    margin-left: 1vw;
    height: 100%;
    .swiper-pagination{
        bottom: 0;
    }
    .swiper-slide {
        //width: 10.5vw !important;
        //margin-right: 10px !important;
        height: 21vh;
        margin-top: 0.5vh;
        .miao-box{
            width: 100%;
            height: 9.72vh;
            position: relative;
            .miao-img{
                width: 100%;
                height: 100%;
            }
            .miao-item{
                position: absolute;
                bottom: 0;
                width: 100%;
                height: 3vh;
                padding: 0.3vh 0.5vh;
                background: rgba(31, 31, 31, 0.55);
                color: #cbcbcb;
                display: flex;
                justify-content: flex-end;
                align-items: flex-end;
                .label{
                    width: 3.2vw;
                    color: #ffffff;
                }
            }
        }
        .miao-box1{
            width: 100%;
            height: calc(100% - 9.72vh);
            display: flex;
            flex-wrap: wrap;
            background: #0c3378;
            .miao-item{
                width: 100%;
                margin-top: 0.5vh;
                height: 2vh;
                display: flex;
                .label{
                    width: 3.2vw;
                    color: #ffffff;
                }
            }
            .miao-item1{
                color: #41ff65;
            }
        }
    }
}
</style>