Slick Slider «съедает» встроенные стили слайдов. Что делать?

Question

[Алексей Гладких]

Проблема в адаптации слайдера к мобильным устройствам. Дело в том, что у слайда background-img задан встроенным стилем.

<div class="slick-slide">
<div class="slide" style="background-image:url(../path/1.jpg);"></div>
<div class="slide" style="background-image:url(../path/2.jpg);"></div>
<div class="slide" style="background-image:url(../path/3.jpg);"></div>
</div>

Соответственно добавил в JS необходимые breakpoints для ресайза слайдера. Так вот, встроенные стили, то есть фоновая картинка, пропадает после перестроения слайдера. Что делать, не пойму. Буду признателен за помощь. Спасибо.

Накидал пример! https://codepen.io/Nadinsan/pen/zjoJBB

Comments

[Владимир Проскурин]

Без примера на каком-нибудь https://jsfiddle.net/ https://codepen.io/ вам вряд-ли помогут, т.к. причин у вашей проблемы может быть много.
PS: Удалите у класса slick-slide русское "к" в конце.

[Алексей Гладких]

Владимир Проскурин, Это я тут уже описался. Сейчас накидаю пример.

Answer 1

[Elwen]

2 самых простых решения:
1) Назначить каждому слайду уникальный класс (например, slide-1, slide-2 и т.д.), по которому будет передаваться картинка. Если все url картинок известны заранее, то можно отправить в файл со стилями. Если нет, то добавить на страницу в <style></style>.
2) Добавить в каждый .slide вложенный div, которому и назначать background-image.

Comments

[Алексей Гладких]

Спасибо, попробую!