vue3+swiper8 实现嵌套swiper图

近期看到一个demo 就是一个banner图中还有个小的banner图 从里面的banner图可以控制外边的banner图 外边的也可以控制里面的监控图。
效果如下：

这里用到了swiper的controller配置项。 实现步骤：

1. 在setup区域声明两个响应式变量方便一会存储两个swiper

const controlledSwiper1 = ref(null);
const controlledSwiper2 = ref(null);

2. 在两个swiper的swiper事件中接收swiper实例

const onSwiper1 = (swiper) => { // 大swiper的swiper事件函数
    controlledSwiper1.value = swiper
};
const onSwiper2 = (swiper) => { // 小swiper的swiper事件函数
    controlledSwiper2.value = swiper
};

3. 在两个swiper上指定controller配置项，配置项为对象，对象中写control指定要控制的swiper实例

// 大swiper
<swiper :modules="modules"
                :loop="true"
                :controller="{ control: controlledSwiper2 }" // 因为要控制小swiper所以指定swiper2
                :slides-per-view="1"
                :scrollbar="{ draggable: true }"
                @swiper="onSwiper1"
                @slideChange="onSlideChange">
                
// 小swiper
            <swiper :modules="modules"
                    :pagination="{ clickable: true }" 
                    :loop="true"
                    :controller="{ control: controlledSwiper1 }"  // 因为要控制大swiper所以指定swiper1
                    class="bannerDes"  
                    @swiper="onSwiper2"
                    :space-between="50"
                    :slides-per-view="1" 
                    ref="smallSwiper"
                    navigation
                >