嵌套的子滑动器在滑动时滑动到下一个/上一个父滑动器，或者单击下一个/上一个按钮

Question

我有6个父级滑动幻灯片，每个幻灯片由一个带有几张（5至6个）幻灯片的子级滑动组成。在移动设备上，显示为1比1。

现在，它要求用户在容器的最边缘滑动才能滑动到下一个父滑动器，并且上一个/下一个按钮仅适用于父滑动器上的幻灯片。

如何做到这一点：

（1）箭头按钮无缝地作用于子滑块的所有幻灯片（即，当它位于child-1的最后一张幻灯片时，按下一个箭头按钮将转到child-2的第一张幻灯片）

（2）与（1）一样，在移动设备上刷卡也是无缝的

在https://codepen.io/aahlfeeyann/pen/dgyddO上查看更多详细信息，然后在此处检查代码：

<div class="swiper-container swiper-container-parent">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <div class="swiper-container swiper-container-child-1">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"></div>
                    <div class="swiper-slide"></div>
                    .
                    .
                    .
                </div>
            </div>
        </div>
        <div class="swiper-slide">
            <div class="swiper-container swiper-container-child-2">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"></div>
                    <div class="swiper-slide"></div>
                    .
                    .
                    .
                </div>
            </div>
        </div>
        .
        .
        .
    </div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
 </div>

 <script>
     var mySwiperChild1 = new Swiper('.swiper-container-child-1', {
        slidesPerView: 3,
        slidesPerGroup: 3,
        spaceBetween: 80,
        grabCursor: true,
        breakpoints: {
            480: {
                slidesPerView: 1,
                slidesPerGroup: 1,
                spaceBetween: 30
            },
            640: {
                slidesPerView: 2,
                slidesPerGroup: 2,
                spaceBetween: 40
            }
        }
    });

    var mySwiperChild2 = new Swiper('.swiper-container-child-2', {
        slidesPerView: 3,
        slidesPerGroup: 3,
        spaceBetween: 80,
        grabCursor: true,
        breakpoints: {
            480: {
                slidesPerView: 1,
                slidesPerGroup: 1,
                spaceBetween: 30
            },
            640: {
                slidesPerView: 2,
                slidesPerGroup: 2,
                spaceBetween: 40
            }
        }
    });

    var mySwiperParent = new Swiper('.swiper-container-parent', {
        grabCursor: true,
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        breakpoints: {
            480: {
                slidesPerView: 1,
                slidesPerGroup: 1,
                spaceBetween: 30
            },
            640: {
                slidesPerView: 2,
                slidesPerGroup: 2,
                spaceBetween: 40
            }
        }
    });
 </script>