Почему у меня slick слайдер не на всю ширину родителя?

Question

[HelpSophie]

Есть сайт. Он мягко говоря древний.
Хочется подключить к нему slick. Вроде бы все старые скрипты подружились с новым jq через migrate. Ошибок нет. Но slick растянулся куда-то в сторону до бесконечности.
Что я не так сделала?

Answer 1

[sergey]

Задайте этому блоку какую-либо максимальную ширину, к примеру 760px, а то он у Вас max-width:100%

.banner {
    text-align: center;
    vertical-align: top;
    padding-top: 16px;
    padding-bottom: 25px;
    max-width: 760px;
    width: 100%;
}

и все у вас работает

Comments

[Иван]

Чем phpstorm лучше саблайма?просто думаю перейти

[sergey]

Иван: у меня webstorm это IDE, мне удобнее, мощнее и функциональнее, я с ним уже давно.
phpstorm для тех кто пишет на php

[HelpSophie]

Иван: sublime это грубо говоря цветной блокнот с приблудами, web/phpstorm это IDE, т.е. среда разработки.
Но какое отношение это имеет к моему вопросу?

[HelpSophie]

Sagan: Дык нужен-то резиновый, как я ему ширину задам?

[sergey]

HelpSophie: и что? задаете width: 100%, max-width: 750px; с помощью медиа-запросов и вуаля адаптивный, по иному у Вас ничего не выйдет просто, там код через пень колоду, извините.

[HelpSophie]

Sagan: И что, для каждой ширины писать max-width:750px, max-width: 751px и т.д.? Это не безумие?

https://jsfiddle.net/h1nzqtgh/ Вот есть div с 90% шириной, в нем есть картинка всегда на всю его ширину.
Как мне сделать так, чтобы картинки упакованные в слайдер вели себя точно также?

[sergey]

HelpSophie:

И что, для каждой ширины писать

да нет же конечно, Вы версткой давно занимаетесь?
Откройте туториал по slick и почитайте о адаптивности слайдера

Как мне сделать так, чтобы картинки упакованные в слайдер вели себя точно также?

ну логичнее всего, сделать обертку для слайдера

[HelpSophie]

Sagan:
Версткой я занимаюсь давно, от слова очень, поэтому поведение слайдера в данном случае вообще не понятно.

Откройте туториал по slick и почитайте о адаптивности слайдера

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

ну логичнее всего, сделать обертку для слайдера

Если открыть сайт, то видно, что у обертки слайдера стоит ширина 90% (также, как и в примере с обычной картинкой). Потому что я тоже считала, что логично. Но слайдер стал растягивать обертку до неимоверной ширины. И вот это мне уже не понятно.

[sergey]

HelpSophie: 90% для блока это в данном случае 30 000px, каков принцып работы слайдера? он выстраивает в ряд все слайды, проекции слайдов и т.д, и поэтому обертка 90% для него от чего, от бесконечности выходит, он так и считает, сначала нужно ограничить пространство, в нем уже Ваши 90% чего то

[HelpSophie]

Sagan: ширина блока указанная в %% считается от ширины родителя. Собственно, как в примере выше с обычной картинкой https://jsfiddle.net/h1nzqtgh/

Вот аналогичный пример с шириной 90% и адекватно работающим slick https://jsfiddle.net/m25zodj7/
Но в отрыве от этого сайта.
А я не могу понять где косяк в скриптах ну или в стилях или в порядке их подключения, что на сайте все работает не так, как в примере. Я их уже во всех порядках подключала. Похоже, что не вижу какой-то простой ошибки типа "запятой".

[sergey]

HelpSophie: может еще быть косяк из-за порядка подключения slick в js, ведь если сейчас посмотреть на сайт, то слайдер не работает, точнее развернулся горизонтально

[HelpSophie]

Sagan: Вы видимо в неудачный момент смотрели, когда меняла скрипты.

Я нашла ошибку. Дело в том, что у обертки тремя (!!!) уровнями выше был задан display:flex, а у его детей не была задана ширина за ненадобностью, пока дело не дошло до расчета ширины для слайдера.

Вам большое спасибо за терпение и поддержку меня :)

[sergey]

HelpSophie: я как раз хотел сказать что из-за флекса:) да ничего страшного у все бывает, удачи.