slidesPerView SwiperSlider не работает должным образом?

const swiper = new Swiper('.swiper', {
// Optional parameters

// If we need pagination
pagination: {
    el: '.swiper-pagination',
    type: 'fraction',
},
slidesPerView: 3,
slidesPerColumn: 3,
spaceBetween: 15,
// Navigation arrows
navigation: {
    nextEl: '.swiper-button-nex',
    prevEl: '.swiper-button-pre',
},
breakpoints: {
    1900: {
        slidesPerView: 3,
        slidesPerColumn: 3,
        pagination: {
            el: '.swiper-pagination',
            type: 'fraction',
        },
    },
    1600: {
        slidesPerView: 3,
        slidesPerColumn: 3,
    },
    992: {
        slidesPerView: 1,
        slidesPerColumn: 1,
        pagination: {
            el: '.swiper-pagination',
            type: 'fraction',
        },
    },
    200: {
        pagination: {
            el: '.swiper-pagination',
            type: 'bullets',
        },
    }
}

});

Вот код, прошу прощения за его большое количество, но мне кажется он нужен для четкого понимая проблемы, также залил на https://codepen.io/niceevolutionjoke/pen/oNqJZpE . Проблема заключается в том, что slidesPerView не работает должным образом, стоит показ трех слайдов, а он показывает ещё кусочек следующего слайда, если я поставлю значение 1 ничего не меняется, как решить проблему?