Как решить проблему с адаптацией slick slider?

Question

[chelnokov_a]

https://pateder.ru/Development/stelage/single-card.html

Здравствуйте. Возникла проблемка с адаптацией слайдера.
Если откроете страницу в размере менее 630 пикселей шириной то увидите сто слайдер вертикальный и верстка плывет. Но если немного подвинуть ширину экрана то все встает на свои места. То есть как бы все работает но при загрузки страницы не верно отображается.




Давно мучаюсь с этим. Никак не пойму в чем дело. Спасибо

Вот код слайдера

$('.big-slider').slick({
            slidesToShow: 1,
            slidesToScroll: 1,
            arrows: false,
            fade: true,
            asNavFor: '.mini-slider',
            variableWidth: false,
            infinite: false,
        });
        $('.mini-slider').slick({
            slidesToScroll: 1,
            asNavFor: '.big-slider',
            infinite: false,
            dots: false,
            centerMode: true,
            prevArrow: $('.mini-slider-prev'),
            nextArrow: $('.mini-slider-next'),
            vertical: true,
            slidesToShow: 3,
            responsive: [
                {
    				breakpoint: 632,
    				settings: {
    					vertical: false,
    					fade: true,
    				}
    			},
                {
                breakpoint: 631,
                settings: {
                    vertical: false,
                    variableWidth: false,
                    initialSlide: 1,
                    centerMode: false,
                    slidesToShow: 3,
                    }
                },
                {
                breakpoint: 481,
                settings: {
                    slidesToShow: 2,
                    centerMode: false,
                    vertical: false,
                    }
                },


                // You can unslick at a given breakpoint now by adding:
                // settings: "unslick"
                // instead of a settings object
            ]
        });

Comments

[chelnokov_a]

Вопрос решен. Помогло то что обернул код слайдера в функцию onload.
$(window).on('load', function() {
КОД СЛАЙДЕРА
} )

Answer 1

[Александр Епихин]

Для начала попробуйте поправить breakpoints, оставьте только один https://yadi.sk/i/boIJiSEeKQIaVA b уберите дублирование в settings

Comments

[chelnokov_a]

Сделал это. Но проблема осталась.

responsive: [
                {
                breakpoint: 631,
                settings: {
                    vertical: false,
                    variableWidth: false,
                    initialSlide: 1,
                    centerMode: false,
                    slidesToShow: 3,
                    }
                },
                {
                breakpoint: 481,
                settings: {
                    slidesToShow: 2,
                    }
                },


                // You can unslick at a given breakpoint now by adding:
                // settings: "unslick"
                // instead of a settings object
            ]

[Александр Епихин]

Попробуйте ниже добавить строчку:
$('.mini-slider').slick('setPosition');

[Александр Епихин]

Если не поможет попробуйте расположить ваш код в $(document).ready(function(){})