Slider Swiper не корректно скролит картинки?

Question

[Nayro TV]

Делаю проект на react, слайдер. Вот у меня вопрос, почему когда я указываю настройки которые показаны ниже, у меня сладиться сладиться а потом в центре встаёт? Ну т е я слайдю через кнопку..

<Swiper
            modules={[Navigation, Pagination, Scrollbar, A11y]}
            spaceBetween={30}
            loop={true}
            slidesPerView={8}
            // slidesPerGroup={1}
            speed={200}
            navigation
            // pagination={{ clickable: true }}
            onSwiper={(swiper) => console.log(swiper)}
          >
            <SwiperSlide>
              <div className="brands__img">
                <img src="/img/brands_1.webp" alt="" />
              </div>
            </SwiperSlide>
            <SwiperSlide>
              <div className="brands__img">
                <img src="/img/brands_1.webp" alt="" />
              </div>
            </SwiperSlide>
            <SwiperSlide>
              <div className="brands__img">
                <img src="/img/brands_1.webp" alt="" />
              </div>
            </SwiperSlide>
            <SwiperSlide>
              <div className="brands__img">
                <img src="/img/brands_1.webp" alt="" />
              </div>
            </SwiperSlide>
            <SwiperSlide>
              <div className="brands__img">
                <img src="/img/brands_1.webp" alt="" />
              </div>
            </SwiperSlide>
            <SwiperSlide>
              <div className="brands__img">
                <img src="/img/brands_1.webp" alt="" />
              </div>
            </SwiperSlide>
            <SwiperSlide>
              <div className="brands__img">
                <img src="/img/brands_1.webp" alt="" />
              </div>
            </SwiperSlide>
            <SwiperSlide>
              <div className="brands__img">
                <img src="/img/brands_1.webp" alt="" />
              </div>
            </SwiperSlide>
            <SwiperSlide>
              <div className="brands__img">
                <img src="/img/brands_1.webp" alt="" />
              </div>
            </SwiperSlide>
            <SwiperSlide>
              <div className="brands__img">
                <img src="/img/brands_1.webp" alt="" />
              </div>
            </SwiperSlide>
            <SwiperSlide>
              <div className="brands__img">
                <img src="/img/brands_1.webp" alt="" />
              </div>
            </SwiperSlide>
            <SwiperSlide>
              <div className="brands__img">
                <img src="/img/brands_1.webp" alt="" />
              </div>
            </SwiperSlide>
            <SwiperSlide>
              <div className="brands__img">
                <img src="/img/brands_1.webp" alt="" />
              </div>
            </SwiperSlide>
            <SwiperSlide>
              <div className="brands__img">
                <img src="/img/brands_1.webp" alt="" />
              </div>
            </SwiperSlide>
          </Swiper>