How to change image in slick slider on mobile device?

Question

JavaScript

The kenwheeler.github.io/slick slider has a responsive option for responsive behavior. I have images in the slider in horizontal orientation. Is it possible somehow for a width, say, less than 800px, to change the image to a vertical one?

Answer 1

Alternatively, put the image links in the data attribute. and then in js you change them to src images. and don't forget to reinit the slick slider.

Answer 2

There is also the picture tag, which allows you to use the source tag to specify different images for different media queries using something like this syntax:

<picture>
    <source src="med.jpg" media="(min-width: 40em)" />
    <source src="sm.jpg" />
    <img src="fallback.jpg" alt="" />
</picture>

True, his support is not ideal. caniuse.com/#feat=picture