Почему не работает Slideable Navigation Drawer при добавление в него другого слайдера?

Создал взял навигацию из с demo swiper и при добавление в неё другого слайдера она стала переключать этот слайдер в его начало, как это исправить код

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">

<div class="swiper-wrapper">
    <nav class="swiper-slide menu swiper-slide-active">

    </nav>
    <div class="swiper-slide content swiper-slide-prev">
        <header>
            <div class="menu-button cross ">
                <div class="bar"></div>
                <div class="bar"></div>
                <div class="bar"></div>
            </div>
        </header>
        <main>
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide slide-two">Slide 1</div>
                    <div class="swiper-slide slide-two">Slide 2</div>
                    <div class="swiper-slide slide-two">Slide 3</div>
                    <div class="swiper-slide slide-two">Slide 4</div>
                    <div class="swiper-slide slide-two">Slide 5</div>
                    <div class="swiper-slide slide-two">Slide 6</div>
                    <div class="swiper-slide slide-two">Slide 7</div>
                    <div class="swiper-slide slide-two">Slide 8</div>
                    <div class="swiper-slide slide-two">Slide 9</div>
                    <div class="swiper-slide slide-two">Slide 10</div>
                </div>
                <!-- Add Pagination -->
                <div class="swiper-pagination"></div>
                <!-- Add Navigation -->
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
            </div>
        </main>
    </div>
</div>

        html,
    body {
        position: relative;
        height: 100%;
    }

    body {
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color: #000;
        margin: 0;
        padding: 0;
        overflow-x: hidden;
    }

    .menu {
        min-width: 100px;
        width: 70%;
        max-width: 320px;

        background-color: #2C8DFB;
        color: #fff;
        text-align: center;
        font-size: 18px;

        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }

    .content {
        width: 100%;
        text-align: center;
        font-size: 18px;
        background: #fff;

        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }

    .menu-button {
        position: absolute;
        top: 0px;
        left: 0px;

        padding: 15px;

        cursor: pointer;

        -webkit-transition: .3s;
        transition: .3s;

        background-color: #2C8DFB;

        /*margin: 14px;
        border-radius: 5px;*/
    }

    .menu-button .bar:nth-of-type(1) {
        margin-top: 0px;
    }

    .menu-button .bar:nth-of-type(3) {
        margin-bottom: 0px;
    }

    .bar {
        position: relative;
        display: block;

        width: 50px;
        height: 5px;

        margin: 10px auto;
        background-color: #fff;

        border-radius: 10px;

        -webkit-transition: .3s;
        transition: .3s;
    }

    .menu-button:hover .bar:nth-of-type(1) {
        -webkit-transform: translateY(1.5px) rotate(-4.5deg);
        -ms-transform: translateY(1.5px) rotate(-4.5deg);
        transform: translateY(1.5px) rotate(-4.5deg);
    }

    .menu-button:hover .bar:nth-of-type(2) {
        opacity: .9;
    }

    .menu-button:hover .bar:nth-of-type(3) {
        -webkit-transform: translateY(-1.5px) rotate(4.5deg);
        -ms-transform: translateY(-1.5px) rotate(4.5deg);
        transform: translateY(-1.5px) rotate(4.5deg);
    }

    .cross .bar:nth-of-type(1) {
        -webkit-transform: translateY(15px) rotate(-45deg);
        -ms-transform: translateY(15px) rotate(-45deg);
        transform: translateY(15px) rotate(-45deg);
    }

    .cross .bar:nth-of-type(2) {
        opacity: 0;
    }

    .cross .bar:nth-of-type(3) {
        -webkit-transform: translateY(-15px) rotate(45deg);
        -ms-transform: translateY(-15px) rotate(45deg);
        transform: translateY(-15px) rotate(45deg);
    }

    .cross:hover .bar:nth-of-type(1) {
        -webkit-transform: translateY(13.5px) rotate(-40.5deg);
        -ms-transform: translateY(13.5px) rotate(-40.5deg);
        transform: translateY(13.5px) rotate(-40.5deg);
    }

    .cross:hover .bar:nth-of-type(2) {
        opacity: .1;
    }

    .cross:hover .bar:nth-of-type(3) {
        -webkit-transform: translateY(-13.5px) rotate(40.5deg);
        -ms-transform: translateY(-13.5px) rotate(40.5deg);
        transform: translateY(-13.5px) rotate(40.5deg);
    }

    .swiper-container {
        width: 100%;
        height: 100%;
    }

    .slide-two {
        text-align: center;
        font-size: 18px;
        background: red;

        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }

    header {
        z-index: 2;
    }

    main {
        width: 100vw;
        height: 100vh;
        z-index: 1;
    }

 var menuButton = document.querySelector('.menu-button');
    var openMenu = function () {
        swiper.slidePrev();
    };
    var swiper = new Swiper('.body', {
        slidesPerView: 'auto',
        initialSlide: 1,
        resistanceRatio: 0,
        slideToClickedSlide: true,
        observer: true,
        observeParents: true,
        on: {
            slideChangeTransitionStart: function () {
                var slider = this;
                if (slider.activeIndex === 0) {
                    menuButton.classList.add('cross');

                    menuButton.removeEventListener('click', openMenu, true);
                } else {
                    menuButton.classList.remove('cross');
                }
            }
            , slideChangeTransitionEnd: function () {
                var slider = this;
                if (slider.activeIndex === 1) {
                    menuButton.addEventListener('click', openMenu, true);
                }
            },
        },
        allowTouchMove: false,
        nested: true
    });

    var swiper = new Swiper('.swiper-container', {
        slidesPerView: 3,
        spaceBetween: 30,
        freeMode: true,
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        nested: true
    });