@Alexander9229

Swiper — Почему слайдер при адаптиве отображает не корректно?

Есть сайт со слайдером
Карусель изначально работает нормально, но при адаптиве происходят не понятные вещи.
Первый слайд показывает нормально, но все остальные при прокрутке как будто съезжают в сторону.

Почему так происходит?

Например:
Первый слайд - 602ebe4116a8e716402351.png
И то что получаем при последнем - 602ebe5e5ac32858064428.png

Скрипт:
var swiperCauses = new Swiper( '.causes-container', {
    slidesPerView: 1,
    spaceBetween: 10,
    navigation: {
        nextEl: '.causes-button-next',
        prevEl: '.causes-button-prev',
    },
    pagination: {
        el: '.causes-pagination',
        clickable: true,
    },
    breakpoints: {
        310: {
            slidesPerView: 1,
        },
        640: {
            slidesPerView: 2,
        },
        768: {
            slidesPerView: 3,
        },
        1240: {
            slidesPerView: 3,
        },
        1650: {
            slidesPerView: 4,
        },
    },
    // autoplay: {
    //     delay: 8000,
    //     disableOnInteraction: false,
    // },
} );
  • Вопрос задан
  • 109 просмотров
Решения вопроса 1
iiiBird
@iiiBird Куратор тега CSS
Пока ты спишь - твой конкурент совершенствуется
тк не прописывай ему в css max-width и min-width, которые у тебя для .causes-slide заданы. скрипт слайдера высчитывает width и работает на этих параметрах. а ты эти параметры ломаешь своими стилями
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы