Da musste ich jetzt auch ein wenig daran arbeiten 
Der Container, den Swiper da benutzt, hat overflow:hidden; und wenn man versucht, die Pfeile herauszuschieben, verschwinden sie 
Daher musste ich sie aus dem Container heraus nehmen und die Elemente in der Initialisierung übergeben statt der Klassen.
Und der .swiper-container verträgt es anscheinend nicht, wenn er ein Flexitem ist, was ich nicht verstehe. Daher musste ich die Pfeile absolut positionieren. Ich habe es zunächst mal für beide Slider getrennt gemacht. Wenn es mehr als zwei werden, empfiehlt es sich, das Ganze mit einer Schleife zu machen.
Dieses funktioniert bei mir:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">
<style>
.swiper-slide {
height: 30vh;
background-color: lightgrey;
}
.slider-wrapper {
margin: 0 auto;
width: 80%;
position: relative;
/* display: flex;
align-items: center;
justify-content: center; */
}
.nav-btn-prev,
.nav-btn-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.nav-btn-prev {
left: -20px;
}
.nav-btn-next {
right: -20px;
}
</style>
</head>
<body>
<div class="swiper_wrap">
<div class="slider-wrapper">
<div id="prev-btn-1" class="nav-btn-prev"><</div>
<div class="swiper-container" id="mySwiper1">
<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>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
<div id="next-btn-1" class="nav-btn-next">></div>
</div>
</div>
<div class="swiper_wrap">
<div class="slider-wrapper">
<div id="prev-btn-2" class="nav-btn-prev"><</div>
<div class="swiper-container" id="mySwiper2">
<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 class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
</div>
<div class="swiper-pagination"></div>
</div>
<div id="next-btn-2" class="nav-btn-next">></div>
</div>
</div>
<script src="https://unpkg.com/swiper/js/swiper.js"></script>
<script>
var swiper1 = new Swiper('#mySwiper1', {
slidesPerView: 1,
spaceBetween: 10,
autoplay: 3500,
autoplayDisableOnInteraction: false,
loop: true,
// If we need pagination
pagination: {
el: '.swiper-pagination',
},
// Navigation arrows
navigation: {
nextEl: document.getElementById('prev-btn-1'),
prevEl: document.getElementById('next-btn-1'),
},
});
var swiper2 = new Swiper('#mySwiper2', {
slidesPerView: 1,
spaceBetween: 10,
autoplay: 3500,
autoplayDisableOnInteraction: false,
loop: true,
// If we need pagination
pagination: {
el: '.swiper-pagination',
},
// Navigation arrows
navigation: {
nextEl: document.getElementById('prev-btn-2'),
prevEl: document.getElementById('next-btn-2'),
},
});
</script>
</body>
</html>
Alles anzeigen
Die Pfeile musst Du dann selbst ausgestalten.
Wenn ich das richtig verstehe, hast Du deine Daten in options.test im JSON-Format, die parst Du erfolgreich in die Variable dataJSON. Und jetzt weißt Du nicht, wie Du eine Callback-Funktion nach dem Parsen aktivieren kannst.