How to make two swiper sliders on one page?

Question

JavaScript

I have top slider

<div class="intro">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="intro__wrapper intro__wrapper--eagle">
                        <div class="container">
                            <h2 class="intro__suptitle">Creative Template</h2>
                            <h1 class="intro__title">Welcome<br />to MoGo</h1>
                            <a class="intro__btn" href="#">Learn more</a>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="intro__wrapper intro__wrapper--lion">
                        <div class="container">
                            <h2 class="intro__suptitle">What We Do</h2>
                            <h1 class="intro__title">Great<br />Mogo</h1>
                            <a class="intro__btn" href="#">Learn more</a>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="intro__wrapper intro__wrapper--owl">
                        <div class="container">
                            <h2 class="intro__suptitle">Here We Are</h2>
                            <h1 class="intro__title">We Are<br />MoGo</h1>
                            <a class="intro__btn" href="#">Learn more</a>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="intro__wrapper intro__wrapper--tit">
                        <div class="container">
                            <h2 class="intro__suptitle">Our Contacts</h2>
                            <h1 class="intro__title">Welcome<br />to MoGo</h1>
                            <a class="intro__btn" href="#">Learn more</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
</div>

var menu = [
  "<span>01</span>intro",
  "<span>02</span>work",
  "<span>03</span>about",
  "<span>04</span>contacts",
];
var mySwiper = new Swiper(".swiper-container", {
  effect: "fade",
  speed: 500,
  pagination: {
    el: ".swiper-pagination",
    clickable: true,
    renderBullet: function (index, className) {
      return '<div class="' + className + '">' + menu[index] + "</div>";
    },
  },
});

And when the second slider on the page is initialized, they start working simultaneously. And if I remove Slide 4 here, then the 4th slide also disappears on my top slider. Tell me how to make them work out of sync, apparently you need to add additional classes somewhere?

<div class="reviews">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">Slide 1</div>
                <div class="swiper-slide">Slide 2</div>
                <div class="swiper-slide">Slide 3</div>
                <div class="swiper-slide">Slide 4</div>
            </div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>
    </div>

var swiper = new Swiper(".swiper-container", {
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
});