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

Question

[niceevolutionjoke]

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 ничего не меняется, как решить проблему?

Answer 1

[Виталий Першин]

Там все нормально работает, ровно так как вы и написали в стилях.
flex: 0 0 100%; для .reviews-item зачем вы переопределили flex-basis? Убирайте
max-width во все местах для слайда зачем? Как слайдер может рассчитать себе необходимое пространство, если вы ему его на даете?
В одном месте вы заставляете слайды занимать больше места чем им нужно, в другом же ограничиваете, определитесь.
То же самое с padding и border для слайда, вы не задали box-sizing: border-box; поэтому вы свои слайды увеличили на величину отступов. В общем разбирайтесь со своими стилями
И не надо переопределять стили слайдов, вставляйте свой код внутрь слайда и внутри делайте что хотите

Comments

[niceevolutionjoke]

Бордер бокс в обнулении есть, скорее всего из за flex: 0 0 100%
спасибо большое

[Виталий Першин]

niceevolutionjoke, Нет у вас никакого обнуления в примере. Я указал все ошибки которые решают проблему, так как проверил прежде чем написать. И да, не используйте обнуление это потом аукнется.