Как загружать другие изображения на мобильных устройствах в Slick Slider?

Question

[Minusator]

Доброго дня

Есть Slick Slider на такой разметке

<div class="slider">
	<div class="slide">
		<picture>
			<source srcset="img/slides/slide-new-1.webp" type="image/webp">
			<source srcset="img/slides/slide-new-1.jpg" type="image/jpeg"> <img src="img/slides/slide-new-1.jpg"> 
                </picture>
	</div>
	<div class="slide">
		<picture>
			<source srcset="img/slides/slide-new-1.webp" type="image/webp">
			<source srcset="img/slides/slide-new-1.jpg" type="image/jpeg"> <img src="img/slides/slide-new-1.jpg"> 
                </picture>
	</div>
</div>

$('.slider').slick({
		infinite: true,
		slidesToShow: 1,
		slidesToScroll: 1,
		dots: true,
		arrows: false,
		autoplay: true,
		fade: true,
		autoplaySpeed: 5000
	});

Как мне загружать другие изображения на мобильном устройствах?
Мне нужно именно другие изображения, так как слайдер очень узкий и при масштабировании ничего не видно.

Спасибо за помощь!

Comments

[xdevelx]

https://developer.mozilla.org/ru/docs/Web/HTML/Ele...

[Minusator]

благодарю!

Answer 1

[ThunderCat]

Пикча как раз и создана для адаптивности и максимальной экономии трафика и ресурсов.
1 вариант - использовать media запросы для source: media="(max-width: 1200px)"
2 вариант - srcset:

<srcset="image-small.png 320w, image-medium.png 800w, image-large.png 1200w">

читать про адаптивные изображения

Answer 2

[wonderingpeanut]

const isSmallScreen = window.innerWidth < X;
const src = isSmallScreen ? smallImg : bigImg
const img = document.querySelector(myImg);
img.src = src;

Comments

[ThunderCat]

по рукам клавой. Нельзя так делать, есть куча средств как это сделать без привлечения странных скриптов, которые еще и не будут работать при повороте устройства например.

[Minusator]

ThunderCat, действительно. себе тоже ударил. сделал по другому. на уровне верстки решил вопрос.