No idea if this is the correct category.
Anyway, images for sliders on desktop screens need to have a pretty slim ratio, like 1200 x 400px. But in a mobile phone, they need to be e.g. 1200 x 900.
Is there any way I can change images? I have tried a number of media queries here and there. Even tried a separate slider for small screens. All to no avail.
Anyone?
Sorry, not sure I understand your questionā¦
It sounds like you need to use a srcset but I may not be completely understanding you
It would be really helpful to show us a sample of the code and what you want different.
You can use the picture element (combined with srcset) to select different images based on the required criteria and is the only real option for art direction where you want to force a different image.
Srcset on its own will let the browser choose the best image and that may be an already cached larger image which is not what is wanted for art direction. The picture element makes sure that the images are swapped based on what you told it and not what it thinks best. This is called āArt Directionā as essentially you are serving a different image altogether rather than just smaller/larger images.
Scroll down to the picture element in this article although you should also read the whole article.
Itās not a task for the faint hearted and Iāve no idea how you can merge that into an off the shelf slider like WOW but it may be as simple as inserting the picture element instead of images but its not something I have tested.
Thanks a bunch, all of you, for replies and sorry for belated feedback.
I finally found another slider https://github.com/kenwheeler/slick that automatically adjusts its container according to each individual imageās dimensions. Hence, it works with two sets of images, one for screens up to e.g. 999px and one from 1000px and up and I just show/hide each by @media definitions.
Case closed.
