How to use multiple sliders, Swiper in particular, on the same page independently of each other?

Question

JavaScript

There is a landing page, you need to fasten 4 sliders. Everything works fine, but when you click on the arrows, all the sliders work and everything switches. Plus, the settings apply to everyone, not to individual ones.
I tried to access the .container-swiper class through the parent class, for example -first, -second, ..slider, - does not work out that way.

Answer 1

you need to create 4 variables and assign for each the creation and initialization of a specific slider

var slider1 = new Swiper ('.slider1', {
      loop: true
}) 
var slider2 = new Swiper ('.slider2', {
      loop: true
})