Swiper не корректно работает при трех слайдах

Все привет, столкнулся с рядом проблем слайдера Swiper и не знаю как решить. Необходимо сверстать вот такой слайдер:

Сам слайдер идет на всю ширину экрана(при макете 1440px). А слайды в нем имеют ширину 730px.Боквые слайды, от центрального немного выходят за пределы экрана. В нем всего три слайда. HTML

<section class="swiper mySwiper2">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide"
            style="background: url('./assets/images/slider-2/col1.png'); background-repeat: no-repeat; background-size: cover;">
            <!-- <img src="./assets/images/slider-2/col1.png" alt=""> -->
        </div>
        <div class="swiper-slide"
            style="background: url('./assets/images/slider-2/col2.png'); background-repeat: no-repeat; background-size: cover;">
            <!-- <img src="./assets/images/slider-2/col1.png" alt=""> -->
        </div>
        <div class="swiper-slide"
            style="background: url('./assets/images/slider-2/col3.png'); background-repeat: no-repeat; background-size: cover;">
            <!-- <img src="./assets/images/slider-2/col1.png" alt=""> -->
        </div>
    </div>
    <!-- If we need pagination -->
</section>

jS

var slider2 = new Swiper('.mySwiper2', {
 slidesPerView: 'auto',
 slidesPerColumn: 1,
 speed: 1000,
 centeredSlides: true,
 loop: true,
 direction: 'horizontal',
 });

В Css задана ширина слайдов. Результат:

Swiper добавляет пустое пространство после первого слайда. Как вариант, пробовал добавить еще несколько слайдов в HTML. Отступ в конце пропадает, но при достижение последнего слайда он прыгает на начальный слайд и на мгновение видно пустое пространство перед первым слайдом. Так же свойство "slidesPerView: 'auto'" добавляет вокруг слайда микро отступы.