JavaScript thumbnail swiper / slider doesn't work properly - slider

Question

I'm trying to make a simple swiper / slider with thumbnails. It works fine, the only problem is, that slides on the right, which do not have to be shown yet, are present on the screen, which makes the swiper wider than the webpage...
Here ist the picture, how it looks like
Does anyone know, how to fix it? What am I doing wrong?
Thanks for you help.
var galleryThumbs = new Swiper('.gallery-thumbs', {
spaceBetween: 10,
slidesPerView: 'auto',
freeMode: true,
watchSlidesVisibility: true,
watchSlidesProgress: true,
});
var galleryTop = new Swiper('.gallery-top', {
spaceBetween: 10,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
grabCursor: true,
thumbs: {
swiper: galleryThumbs
}
});
html,
body {
position: relative;
height: 100%;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide{
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
align-items: center;
}
.gallery-top {
height: 60%;
width: 100%;
}
.gallery-thumbs {
height: 20%;
box-sizing: border-box;
padding: 10px 0;
}
.gallery-thumbs .swiper-slide {
width: 25%;
height: 100%;
opacity: 0.4;
}
.gallery-thumbs img{
width:40%
}
.gallery-thumbs .swiper-slide-thumb-active {
opacity: 1;
}
.gallery-top img{
width: 400px;
height:400px;
}
#media only screen and (min-width:100px) and (max-width:500px){
.gallery-top img{
width: 300px;
height:300px;
}
.gallery-thumbs img{
width:100%
}
}
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<div class="swiper-container gallery-top">
<div class="swiper-wrapper">
<div class="swiper-slide slide-top">
<img src='https://picsum.photos/id/22/200/300'
alt='slide 1' />
</div>
<div class="swiper-slide slide-top">
<img src='https://picsum.photos/id/237/200/300'
alt='slide 2' />
</div>
<div class="swiper-slide slide-top">
<img src='https://picsum.photos/200/300'
alt='slide 3' />
</div>
</div>
</div>
<!-- Arrows -->
<div class="swiper-button-next swiper-button-black"></div>
<div class="swiper-button-prev swiper-button-black"></div>
<div class="swiper-container gallery-thumbs">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src='https://picsum.photos/200/300'
alt='slide 1' />
</div>
<div class="swiper-slide">
<img src='https://picsum.photos/200/300'
alt='slide 2' />
</div>
<div class="swiper-slide">
<img src='https://picsum.photos/200/300'
alt='slide 3' />
</div>
</div>
</div>

Answer 1

Your mistake.
The CDN is for swiper 8
https://unpkg.com/swiper#8.4.4/swiper-bundle.min.css
But your markup is of the old versions of swiper.
https://swiperjs.com/migration-guide
Change swiper-container to swiper
html,
body {
position: relative;
height: 100%;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide{
display: -webkit-flex;
display: flex;
justify-content: center;
align-items: center;
}
.gallery-top {
height: 60%;
width: 100%;
}
.gallery-thumbs {
height: 20%;
box-sizing: border-box;
padding: 10px 0;
}
.gallery-thumbs .swiper-slide {
width: 25%;
height: 100%;
opacity: 0.4;
}
.gallery-thumbs img{
width:40%
}
.gallery-thumbs .swiper-slide-thumb-active {
opacity: 1;
}
.gallery-top img{
width: 400px;
height:400px;
}
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<div class="swiper gallery-top">
<div class="swiper-wrapper">
<div class="swiper-slide slide-top">
<img src='https://picsum.photos/id/22/200/300'
alt='slide 1' />
</div>
<div class="swiper-slide slide-top">
<img src='https://picsum.photos/id/237/200/300'
alt='slide 2' />
</div>
<div class="swiper-slide slide-top">
<img src='https://picsum.photos/200/300'
alt='slide 3' />
</div>
</div>
</div>
<!-- Arrows -->
<div class="swiper-button-next swiper-button-black"></div>
<div class="swiper-button-prev swiper-button-black"></div>
<div class="swiper gallery-thumbs">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src='https://picsum.photos/200/300'
alt='slide 1' />
</div>
<div class="swiper-slide">
<img src='https://picsum.photos/200/300'
alt='slide 2' />
</div>
<div class="swiper-slide">
<img src='https://picsum.photos/200/300'
alt='slide 3' />
</div>
</div>
</div>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script>
var galleryThumbs = new Swiper('.gallery-thumbs', {
spaceBetween: 10,
slidesPerView: 'auto',
freeMode: true,
watchSlidesVisibility: true,
watchSlidesProgress: true,
});
var galleryTop = new Swiper('.gallery-top', {
spaceBetween: 10,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
grabCursor: true,
thumbs: {
swiper: galleryThumbs
}
});
</script>