Неправильное отображение swiper slider

Question

Возникла такая проблема, мне нужно чтобы с двух стороны были видны картинки, а у меня только с одной, как решить эту проблему. Сейчас у меня отображается вот так

А надо вот так

Вот сам код этого слайдера

const mainSlider = new Swiper('.main-slider', {
    slidesPerView: 'auto',
    spaceBetween: 15,
    centeredSlides: true,
    loop: true,
    pagination: {
      el: '.main-slider__pagination',
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
});

.preview {
    &__wrapper {
        padding-bottom: 63px;
    }
}

div.main-slider__slide {
    width: auto;
}

.main-slider__pagination span.swiper-pagination-bullet  {
    width: 131px;
    height: 4px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(15px);
    border-radius: 100px;
}

.main-slider__pagination span.swiper-pagination-bullet-active {
    width: 131px;
    height: 4px;
    background: #FFFFFF;
    border-radius: 100px;
}

button.swiper-pagination.main-slider__pagination.swiper-pagination-bullets {
    bottom: 18px;
}

button.swiper-button-prev.main-slider__btn--prev {
    left: 60px;
}

button.swiper-button-next.main-slider__btn--next {
    right: 60px;
}

.main-slider {
    position: relative;
    
    &__btn {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 16px 44px;
        background: linear-gradient(88.01deg, #730000 -9.57%, #FF0000 115.37%);
        backdrop-filter: blur(8.5px);
        border-radius: 15px;
        color: #FFF;
        position: absolute;
        right: 40px;
        bottom: 60px;
        font-weight: 600;
        font-size: 16px;
    }
}

<div class="preview">
  <div class="preview__wrapper">
    <div class="preview__container">
      <div class="swiper-container main-slider">
        <div class="swiper-wrapper main-slider__container">
          <div class="swiper-slide main-slider__slide">
            <button class="main-slider__btn">Открыть</button>
            <img src="/images/main-slider/bison.jpg" alt="">
          </div>
          <div class="swiper-slide main-slider__slide">
            <button class="main-slider__btn">Открыть</button>
            <img src="/images/main-slider/bison.jpg" alt="">
          </div>
          <div class="swiper-slide main-slider__slide">
            <button class="main-slider__btn">Открыть</button>
            <img src="/images/main-slider/bison.jpg" alt="">
          </div>
        </div>
    
        <button class="swiper-pagination main-slider__pagination"></button>
        <button class="swiper-button-prev main-slider__btn--prev"></button>
        <button class="swiper-button-next main-slider__btn--next"></button>
      </div>
    </div>
  </div>
</div>

БЛОГ НА HUSL

Неправильное отображение swiper slider

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