Как сделать два swiper слайдера на одной странице?

Question

[DeveloperV]

У меня есть верхний слайдер

<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>";
    },
  },
});

И при инициализации второго слайдера на странице, они начинают работать одновременно. И если я тут уберу Slide 4, то у меня на верхнем слайдере тоже пропадает 4 слайд. Подскажите как сделать чтобы они работали не синхронно, видимо нужно дописать где-то дополнительные классы?

<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",
  },
});

Comments

[DeveloperV]

Если кому понадобиться. Исправил добавив классы.

<div class="swiper-container swiper-container--intro>">
 <div class="swiper-container swiper-container--reviews">

var mySwiper = new Swiper(".swiper-container.swiper-container--intro", {
...
});
var swiper = new Swiper(".swiper-container.swiper-container--reviews", {
...
});