Почему не загружается слайдер при открытии страницы?

Question

[TonyGrouse1216]

Подскажите, пожалуйста, почему ломается вёрстка?

После перезагрузки страницы все встает на свои места

Comments

[strelok011]

скорее всего нарушена очередность или зависимость подгрузки js скриптов.
Т.е. у вас возможно сначала загружается и отрабатывает скрипт, не видит, к примеру, jquery и благополучно рассыпается, потом грузится jquery ни для кого.
Рекомендация выполнение скрипта завернуть в document ready или onload...
Можно посмотреть тут как это делают

[Вадим]

Хрустальный шар для предсказаний работает только по пятницам. Приходите в приёмные часы.

Где код? Где демонстрация? ссылка где Вы это развернули?
Пальцем в небо тыкать предлагаете?

Пока что на вопрос

почему ломается вёрстка

можно дать только один ответ - потому что где-то что то ломается(криво сделано).

[TonyGrouse1216]

Вадим, Вот ссылка
Код слайдера:

$('.slider').slick({
            infinite: true,
            slidesToShow: 1,
            slidesToScroll: 1,
            dots: true,
            adaptiveHeight: true,
            asNavFor: '.descr-works',
        });
        $('.descr-works').slick({
            slidesToShow: 1,
            slidesToScroll: 1,
            dots: false,
            arrows: false,
            draggable: false,
            swipe: false,
            touchMove: false,
            adaptiveHeight: true,
        });

Стили:

[TonyGrouse1216]

strelok011, У меня весь код обернут в обработчик DOMContentLoaded

[TonyGrouse1216]

strelok011, У меня сначала загружается jquery, потом slick slider, потом уже мой код, в котором я использую слайдер

[strelok011]

отменяю свои замечания, проблемы в стилях.

[TonyGrouse1216]

strelok011, А что с ними может быть не так?

[strelok011]

works__content - уберите флекс для начала

[TonyGrouse1216]

Уехал влево

[strelok011]

классу slider, у которого max-width: 748px нужно добавить margin: 0 auto;

[TonyGrouse1216]

strelok011, Но он так по центру встанет, а мне надо по правому краю контейнера

[strelok011]

недоглядел, сорян
.works__content - text-align: right;
.slider вместо маржина display: inline-block;

[TonyGrouse1216]

strelok011, Вроде работает, спасибо

[strelok011]

Напоследок совет - прежде чем подключать флекс 10 раз подумайте как сделать то же самое без него. Флекс технология с подвохом. Особенно когда его разворачивают по вертикали.

[TonyGrouse1216]

strelok011, Понял, учту

Answer 1

[Михаил Лялин]

смотря какой слайдер использован и как прописан вызов его кода

kenwheeler.github.io/slick
fotorama.io
wowslider.com/ru