Why in Infinite Loop, the sliders in swiperjs jump when the loop ends and the new loop starts again?

[HMP1989]

I have to design a slider exactly like this. Like this unsplash.com or this piotnetgrid.com.
I could not solve the following problem with the swiper: I want to use the loop in this slider. I have put 20 photo slides in this slider. When auto-play the image 19 and 20 are entered in the view from the right, at this time, sliders 19 and 20 jumps to the left, followed by sliders 1 and 2.
I could not control this jump from right to left.

I asked the same question on site stackoverflow but no one answered.

`

<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Slide 9

Slide 10

Slide 11

Slide 12

Slide 13

Slide 14

Slide 15

Slide 16

Slide 17

Slide 18

Slide 19

Slide 20

`

`
.swiper-wrapper{
box-sizing: border-box !important;
display: flex !important;
flex-flow: column wrap !important;
height: 80vh !important;
text-align: center !important;
text-transform: uppercase !important;
width: 100% !important;
left: 0;
transition-timing-function: linear !important;
}

.grids {
align-items: center !important;
background: white !important;
background-size: cover !important;
background-repeat: no-repeat !important;
box-sizing: border-box !important;
color: white !important;
display: flex !important;
flex-grow: 0 !important;
font-family: sans-serif !important;
font-size: 20px !important;
height: 50% !important;
justify-content: center !important;
max-width: 100% !important;
border: 3px solid white;
}

.grids:nth-child(6n-5) {
height: 30% !important;
width: 25% !important;
}

.grids:nth-child(6n-4) {
height: 70% !important;
width: 25% !important;
}

.grids:nth-child(6n-3) {
height: 50% !important;
width: 30% !important;
}

.grids:nth-child(6n-2) {
height: 50% !important;
width: 30% !important;
}

.grids:nth-child(6n-1) {
height: 60% !important;
width: 40% !important;
}

.grids:nth-child(6n) {
height:40% !important;
width: 40% !important;
}

.swiper {
width: 100%;
height: 100%;
}

.swiper-slide {
text-align: center;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
`

`
var swiper = new Swi
masonry.zip
per(".masonrySwiper", {
direction:"horizontal",
loop: true,
slidesPerView: 8,
simulateTouch:false,

autoplay: {
  enabled: true,
  delay: 1,          
  pauseOnMouseEnter: true,
  disableOnInteraction: false,
},
centerInsufficientSlides:true,
speed: 700,               

});
`

[gouz7514]

Same issue here. It would be easy to read by put your code in code block

code here