Navigation Arrows Position:Relative When Multiple Carousels Initialized

[bcolflesh]

First time using Swiper, I thought there would be a simple way to use more than one carousel on a page - but I can see from Googling this may be deal breaker. The navigation arrows get their position from the swiper.css:

.swiper {
display: block;
list-style: none;
margin-left: auto;
margin-right: auto;
overflow: hidden;
padding: 0;
position: relative;
z-index: 1
}

So whatever the last declared instance on the page is the only place the navigation arrows appear.

Giving the containers different IDs or classes and creating them like "new Swiper('#myswiperid', {" makes no difference. Giving the nextEl/prevEl different IDs or classes also has no effect.

What is the way to have more than one declared instance of Swiper with functioning navigation arrows?

[nolimits4web]

https://swiperjs.com/demos#multiple-swipers

[bcolflesh]

Note the conspicuous lack of navigation arrows in that example, because they don't work as outlined above.

[bcolflesh]

Actually playing around with that codesandbox helped me figure it out - thank you!