vue+Swiper实现带缩略的轮播图(开发记录)

根据需求，实现首页banner，左边大图，右边缩略图；轮播图自动轮播，缩略图选中状态动态变动，跟随大轮播图轮播。同时，鼠标点击任意一个缩略图，左边大图动态跟随轮播。

<template>
    <div class="BannerBox">
        <div class="LeftBanner">
            <div class="swiperBox">
                <div class="swiper-wrapper">
                    <div
                        class="swiper-slide justifyCenter Cursor"
                        v-for="(item, index) in bannerList"
                        :key="'banner' + index"
                        @click="ToDetail(item.id)"
                    >
                        <img class="bannerImg" :src="item.pic" alt="" />
                    </div>
                </div>
            </div>
        </div>
        <div class="RightBanner">
            <div class="swiperThumbs">
                <div class="swiper-wrapper">
                    <div class="swiper-slide Cursor justifyCenter" v-for="(item, index) in bannerList" :key="'banner' + index">
                        <img class="bannerImg" :src="item.pic" alt="" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import Swiper from 'swiper' // 导入 Swiper 组件
export default {
    data() {
        return {
            bannerList: [],
        }
    },
    created() {
        this.getBannerList()
    },
    mounted() {},
    methods: {
        /**
         * 获取banner数据
         */
        getBannerList() {
            this.$axios
                .get('xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx')
                .then((res) => {
                    if (res.code == 1) {
                        this.bannerList = res.result_data
                        this.$nextTick(() => {
                            this.swiperInit() // 在组件挂载后初始化 Swiper(重点)
                        })
                    }
                })
                .catch((err) => {
                    this.$message.error(err)
                })
        },
        /**
         * swiper初始化
         */
        swiperInit() {
            // 初始化缩略图swiper
            let thumbsSwiper = new Swiper('.swiperThumbs', {
                loop: false,
                direction: 'vertical', // 垂直切换选项
                slidesPerView: 'auto', //视图中出现的个数
                spaceBetween: 15, //间距20
                watchSlidesVisibility: true /*避免出现bug*/,
                on: {
                    click: function (e) {},
                },
            })
            // 主swiper
            let swiper = new Swiper('.swiperBox', {
                loop: false,
                autoplay: {
                    delay: 3000,
                    disableOnInteraction: false, //解决滑动后不能轮播的问题
                },
                thumbs: {
                    swiper: thumbsSwiper,
                    multipleActiveThumbs: true, //默认情况下缩略图swiper 拥有复数的active 索引
                    autoScrollOffset: 1, //设置自动滚动的边缘Slide个数。
                    slideThumbActiveClass: 'my-slide-thumb-active', //设置缩略图Swiper的活动块的附加类名。
                },
            })
        },
        /**
         * 详情页面
         */
        ToDetail(id) {
            this.$router.push({ name: 'xxx', params: {})
        },
    },
}
</script>

<style lang="less" scoped>
.BannerBox {
    height: 490px;
    display: flex;
    justify-content: space-between;
    .LeftBanner {
        width: 890px;
        background: #333;
        overflow: hidden;
        border-radius: 10px;
    }
    .RightBanner {
        width: 285px;
        background: #e8f7ff;
        display: flex;
        overflow: hidden;
        padding: 15px 19px;
        border-radius: 10px;
        .swiper-slide {
            height: 138px;
            margin-bottom: 15px;
        }
        .my-slide-thumb-active {
            border: 2px solid #3875f6;
        }
    }
    .swiperBox,
    .swiperThumbs {
        width: 100%;
        height: 100%;
        margin: 0 auto;
        .swiper-slide {
            background-color: #ccc;
            width: 100%;
            border-radius: 10px;
            overflow: hidden;
            .bannerImg {
                width: 100%;
                height: 100%;
            }
        }
    }
    .swiperBox {
        .swiper-slide {
            height: 100%;
        }
    }
}
</style>