How to make two swiper slider on one page?

I have a top slider5e983fa79441c613605156.png
<div class="intro">
 <div class="swiper-container">
 <div class="swiper-wrapper">
 <div class="swiper-slide">
 <div class="intro__intro wrapper.__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__intro wrapper.__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__intro wrapper.__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__intro wrapper.__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 you initialize the second slider on the page, they start working together. And if I will remove the Slide 4, I have on the top slider also disappears 4 slide. Tell me how to do so they worked in sync, apparently you need to add somewhere additional classes?
<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",
},
});
April 19th 20 at 12:19
2 answers
April 19th 20 at 12:21
Solution
How to make multiple identical Swiper Slider sliders on the page?

Swiper like any other normal tool that allows you to specify a selector element, which will be hung in events and work of the script. In the initialization script Swiper - specify different selectors for different sliders to each invocation with a set of features, treated with different sliders. If there are some special buttons and stuff, you need to specify them too, that is, to give different selectors.
Thank you. Fixed - Consuelo_Bernier commented on April 19th 20 at 12:24
@Consuelo_Bernier, OK. - Keely_Ryan commented on April 19th 20 at 12:27
April 19th 20 at 12:23
Set different classes. You have everywhere .swiper-container. JQuery only looks for the first element.
Thank you. Fixed - Consuelo_Bernier commented on April 19th 20 at 12:26

Find more questions by tags SwiperJavaScript