Slick Slider "eats" built-in slide styles. What to do?

Question

css

The problem is adapting the slider to mobile devices. The fact is that the background-img of the slide is set to inline style.

<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>

Accordingly, I added the necessary breakpoints to the JS to resize the slider. So, inline styles, that is, the background image, disappears after the slider is rebuilt. What to do, I do not understand. I would be grateful for help. Thank you.
Dropped an example! https://codepen.io/Nadinsan/pen/zjoJBB

Answer 1

The 2 simplest solutions:
1) Assign each slide a unique class (for example, slide-1, slide-2, etc.) through which the image will be transmitted. If all the urls of the images are known in advance, then you can send them to a file with styles. If not, then add to the page in <style></style>.
2) Add to each .slidenested div and assign a background-image to it.