Why is the slide width not even in the swiper slider?

Question

css

Installed swiper carousel .
Plugged in the following code:

$( document ).ready(function() {
    var swiper = new Swiper('#slider', {
      slidesPerView: 1,
      autoHeight: true,
      spaceBetween: 0,
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev"
      },
      autoplay: {
        delay: 333333500,
        disableOnInteraction: false,
      },
      speed: 900
    });
  });

.swiper-container {
    width: 100%;
    height: 100%;
  }
  .swiper-slide {
    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;
  }

As you can see in the picture, the strip (piece) of the next slide creeps out onto the active slide, why is that? Has anyone experienced this?

Answer 1

There was such a problem, I solved the problem by setting the indents between the slides (spaceBetween).
Setting the width of .swiper-slide in css can also help .