Nadinsan
@Nadinsan
Инженер-системотехник

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

Проблема в адаптации слайдера к мобильным устройствам. Дело в том, что у слайда 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
  • Вопрос задан
  • 1138 просмотров
Решения вопроса 1
Elwen
@Elwen
2 самых простых решения:
1) Назначить каждому слайду уникальный класс (например, slide-1, slide-2 и т.д.), по которому будет передаваться картинка. Если все url картинок известны заранее, то можно отправить в файл со стилями. Если нет, то добавить на страницу в <style></style>.
2) Добавить в каждый .slide вложенный div, которому и назначать background-image.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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