frontend/src/views/components/carouselChart.vue

<template>
    <div class="thumb-example">
        <!-- swiper1 -->
        <swiper class="swiper gallery-top" :options="swiperOptionTop" ref="swiperTop">
            <swiper-slide class="slide-1" v-for="item in bigImg" :key="item.id">
                <img :src="item.url" style="width: 100%; height: 100%" alt="" />
            </swiper-slide>
            <div class="swiper-button-next swiper-button-white" slot="button-next"></div>
            <div class="swiper-button-prev swiper-button-white" slot="button-prev"></div>
        </swiper>
        <!-- swiper2 Thumbs -->
        <swiper class="swiper gallery-thumbs" :options="swiperOptionThumbs" ref="swiperThumbs">
            <swiper-slide class="slide" style="width: 30%; height: 100%" v-for="(item, index) in bigImg" :key="item.id">
                <img style="width: 100%; height: 100%" :src="item.url" alt="" />
                <p class="timeInfo">{{ 7 + index }}:00:12</p>
            </swiper-slide>
            <div class="swiper-button-next swiper-button-white" slot="button-next"></div>
            <div class="swiper-button-prev swiper-button-white" slot="button-prev"></div>
        </swiper>
    </div>
</template>

<script>
export default {
    mounted() {
        // 实现swiper双向控制
        this.$nextTick(() => {
            const swiperTop = this.$refs.swiperTop.swiper;
            const swiperThumbs = this.$refs.swiperThumbs.swiper;
            swiperTop.controller.control = swiperThumbs;
            swiperThumbs.controller.control = swiperTop;
        });
    },
    data() {
        return {
            //轮播大图配置
            bigImg: [
                {
                    url: 'http://180.166.218.222:8104/media/local/XYIGQ10C221000080/210509/XYIGQ10C221000080_21050918190300_1_255.jpg',
                    id: 0
                },
                {
                    url: 'http://180.166.218.222:8104/media/local/XYIGQ10C221000080/202303/XYIGQ10C221000080_20230323100012_1_255_res.jpg',
                    id: 1
                },
                {
                    url: 'http://180.166.218.222:8104/media/local/XYIGQ10C221000080/202303/XYIGQ10C221000080_20230323090012_1_255_res.jpg',
                    id: 2
                },
                {
                    url: 'http://180.166.218.222:8104/media/local/XYIGQ10C221000080/202303/XYIGQ10C221000080_20230323080011_1_255_res.jpg',
                    id: 3
                },
                {
                    url: 'http://180.166.218.222:8104/media/local/XYIGQ10C221000080/202303/XYIGQ10C221000080_20230323070012_1_255_res.jpg',
                    id: 4
                },
                {
                    url: 'http://180.166.218.222:8104/media/local/XYIGQ10C221000080/202303/XYIGQ10C221000080_20230323060012_1_255_res.jpg',
                    id: 5
                }
            ],
            swiperOptionTop: {
                zoom: true,
                loop: true,
                loopedSlides: 5, // looped slides should be the same
                spaceBetween: 10,
                observer: true, //修改swiper自己或子元素时，自动初始化swiper
                observeParents: true, //修改swiper的父元素时，自动初始化swiper
                // autoplay: {  //自动轮播
                //   delay: 2000,
                //   disableOnInteraction: false
                // },
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev'
                }
            },
            swiperOptionThumbs: {
                loop: true,
                loopedSlides: 5, // looped slides should be the same
                spaceBetween: 10,
                centeredSlides: true,
                slidesPerView: 'auto',
                touchRatio: 0.2,
                slideToClickedSlide: true,
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev'
                }
            }
        };
    },

    methods: {}
};
</script>
<style lang="less" scoped>
.thumb-example {
    width: 100%;
    display: flex;
    flex-direction: column;
    height: 100%;
    .gallery-top {
        // height: 80% !important;
        height: 80% !important;
        width: 100%;
    }
    .gallery-thumbs {
        height: 20% !important;
        box-sizing: border-box;
        padding: 10px 0px;
        width: auto;
        margin-left: 2px;
        .swiper-button-next {
            right: 0px;
        }
        .swiper-button-prev {
            left: 0px;
        }
        .timeInfo {
            position: absolute;
            bottom: 0;
            width: 100%;
            background: #f0f0f0;
            padding: 4px 0px;
            font-size: 14px;
            text-align: center;
        }
    }
}

.swiper-slide {
    background-size: cover;
    background-position: center;
}

.gallery-thumbs .swiper-slide {
    // width: 20%;
    // height: 80px;
    // opacity: 0.4;
}
.gallery-thumbs .swiper-slide-active {
    border: 3px solid @color-primary;
}
</style>