Ставлю в Swiper показывать один слайд, но на деле показывает полтора слайда, почему?

Question

[bazliiii]

Добрый день, возникла проблема со слайдером, хочу что бы отображался на мобильной версии один слайд, но на деле показывает полтора, скрин:

Вот сам слайдер на codepen: https://codepen.io/Bazli/pen/OJaqZma
Код слайдера:

var swiper = new Swiper(".reviews-slider", {
    slidesPerView: 1,
    spaceBetween: 30,
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
    breakpoints: {
        768: {
            slidesPerView: 2,
        },
        1100: {
            slidesPerView: 3,
        },
    }
});

Html слайдера:

<div class="reviews__slider-box">
<div class="swiper reviews-slider">
<div class="swiper-wrapper reviews__wrapper">
<div class="swiper-slide reviews__slide">
...Контент...
</div>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>

Comments

[Ankhena]

Значит, какие-то противоречия в стилях.
Пока вы не сделаете демку с видимой проблемой на codepen.io, дублировать каждый день вопрос - бесполезно.

[bazliiii]

Ankhena, добавил слайдер на codepen: https://codepen.io/Bazli/pen/OJaqZma

[Ankhena]

bazliiii, вот это max-width: 270px; кто-то же написал...

[bazliiii]

Ankhena, пробовал в адаптиве его убирать, но результат такой же. Вернее слайд заходит за рамки, вот о чем я:

[Ankhena]

bazliiii, очень хорошо.
Теперь вспоминаем как считается ширина. Использовать calc не удобно, потому что width рассчитывает слайдер. Значит, меняем box-sizing и получаем желаемое.
Ещё убираем width 100%, потому что не ясно зачем это вообще.
Заодно можно и с высотой разобраться.

[bazliiii]

Ankhena, Спасибо за объяснения