Swiper: при пролистывании следующий слайдер будто бы не "долистывает" до середины

Question

Лучше покажу на скринах. На первом скрине видно, как слайдер выглядит изначально, тут проблем нет. Но затем, при пролистывании слайда, второй уже выглядит так (2 скрин), а третий ещё хуже (3 скрин), далее все хуже и хуже. Как я писал, он будто бы не "долистывается" и я не знаю, как это решить. Пытался команде slidesPerView и значение 1, и значение 'auto', но тщетно. Советовали отцентрировать слайды с помощью centeredSlides: true, но результат не меняется. Подскажите, пожалуйста, в чем может быть проблема и как это решить.

Скрины:

Код:

import Swiper, { Navigation, Pagination } from 'swiper';

const swiper = new Swiper('.swiper', {
  breakpoints: {
    320: {
      slidesPerView: 'auto',
      centeredSlides: true,
    }
  }
  });

    .repair__brands__container {
      margin-left: 24px;

      .repair__brands {
        display: flex;
        flex-wrap: wrap;
        margin-top: 40px;
        column-gap: 32px;
        row-gap: 16px;

        .repair__brands__blocks {
          display: flex;
          justify-content: end;
          align-items: center;
          width: 240px;
          height: 72px;
          border: 1px solid #eaeaea;
          border-radius: 6px;
          box-sizing: border-box;
      }

      .repair__brands__blocks:hover {
        cursor: pointer;
        border: 1px solid #303030;
      }

      .repair__brands-hidden {
        display: flex;
        column-gap: 32px;
      }
    }


 @media (max-width: 320px) {
    .repair {
      margin-top: 40px;
      width: 100%;

      .repair__brands__container {
        margin-left: 16px;

        .repair__brands {
          flex-wrap: nowrap;
          width: 280px;
          margin-top: 32px;

          .repair__blocks__wrapper {
            display: flex;
            justify-content: center;

            .repair__brands__blocks {
              width: 240px;
            }
            #more-1.off-1 {
              display: none;
            }
          }
        }
        .repair__more {
          display: none;
        }
      }

    }
  }

<div class="repair__brands__container swiper">
            <div class="repair__brands swiper-wrapper">
              <div class="repair__blocks__wrapper swiper-slide">
                <div class="repair__brands__blocks">
                  <img
                    class="repair__brands__blocks-image repair__brands__blocks-lenovo"
                    src="./img/lenovo_block.png"
                    alt="lenovo"
                  />
                  <img
                    class="repair__brands__blocks-more"
                    src="./img/more_block.svg"
                    alt="more"
                  />
                </div>
              </div>
              <div class="repair__blocks__wrapper swiper-slide">
                <div class="repair__brands__blocks">
                  <img
                    class="repair__brands__blocks-image repair__brands__blocks-samsung"
                    src="./img/samsung_block.png"
                    alt="samsung"
                  />
                  <img
                    class="repair__brands__blocks-more"
                    src="./img/more_block.svg"
                    alt="more"
                  />
                </div>
              </div>
              <div class="repair__blocks__wrapper swiper-slide">
                <div class="repair__brands__blocks">
                  <img
                    class="repair__brands__blocks-image repair__brands__blocks-apple"
                    src="./img/apple_block.png"
                    alt=""
                    apple
                  />
                  <img
                    class="repair__brands__blocks-more"
                    src="./img/more_block.svg"
                    alt="more"
                  />
                </div>
              </div>
              <div class="repair__blocks__wrapper swiper-slide">
                <div class="repair__brands__blocks">
                  <img
                    class="repair__brands__blocks-image repair__brands__blocks-viewsonic"
                    src="./img/viewsonic_block.png"
                    alt="viewsonic"
                  />
                  <img
                    class="repair__brands__blocks-more"
                    src="./img/more_block.svg"
                    alt="more"
                  />
                </div>
              </div>
              <div class="repair__blocks__wrapper swiper-slide">
                <div class="repair__brands__blocks">
                  <img
                    class="repair__brands__blocks-image repair__brands__blocks-bosch"
                    src="./img/bosch_block.png"
                    alt="bosch"
                  />
                  <img
                    class="repair__brands__blocks-more"
                    src="./img/more_block.svg"
                    alt="more"
                  />
                </div>
              </div>
              <div class="repair__blocks__wrapper swiper-slide">
                <div class="repair__brands__blocks">
                  <img
                    class="repair__brands__blocks-image repair__brands__blocks-hp"
                    src="./img/hp_block.png"
                    alt="hp"
                  />
                  <img
                    class="repair__brands__blocks-more"
                    src="./img/more_block.svg"
                    alt="more"
                  />
                </div>
              </div>
              <!-- <div class="repair__brands-hidden off-1" id="more-1">
                <div class="repair__brands__blocks repair__acer swiper-slide">
                  <img
                    class="repair__brands__blocks-image repair__brands__blocks-acer"
                    src="./img/acer_block.png"
                    alt="acer"
                  />
                  <img
                    class="repair__brands__blocks-more"
                    src="./img/more_block.svg"
                    alt="more"
                  />
                </div>
                <div class="repair__brands__blocks repair__sony swiper-slide">
                  <img
                    class="repair__brands__blocks-image repair__brands__blocks-sony"
                    src="./img/sony_block.png"
                    alt="sony"
                  />
                  <img
                    class="repair__brands__blocks-more"
                    src="./img/more_block.svg"
                    alt="more"
                  />
                </div>
              </div> -->
            </div>
            <div class="repair__more">
              <img
                class="repair__more-image"
                src="./img/heading_read.svg"
                alt="show_all"
              />
              <button class="repair__more-btn" id="btn-1">Показать все</button>
            </div>
          </div>

Answer 1

У слайдов слайдера swiper есть такие классы как active и prev. Придай им свойства как тут и все заработает, так как у меня была такая же проблема

БЛОГ НА HUSL

Swiper: при пролистывании следующий слайдер будто бы не "долистывает" до середины

Ответы (1 шт):