image - 如何使用 Slick Slider 为移动设备加载不同的图像？

Question

我尝试创建光滑滑块的移动版本（它应该在移动设备上显示不同的图像）。

是否有任何简单的方法可以做到这一点，而无需添加第二次非常相似的代码来更改图像 src，或者我应该构建下一个 div 滑块并在移动版本上隐藏/显示。

标签： imagemobilesliderslick.js

Answer 1

一点点js

js

let imgs = [
  '<img class="mobile" src="./assets/joursHardtopImage.png"/>',
  '<img class="mobile" src="./assets/joursHardtopImage.png"/>',
]
let mobileImgs = [
  '<img class="mobile" src="./assets/joursMobileImage.png"/>',
  '<img class="mobile" src="./assets/joursMobileImage.png"/>',
]

if($( window ).width() < 600){
  for (let i = 0; i < mobileImgs.length; i++) {
    $('.carousel').append(esMobileImgs[i])
  }
}else{
   for (let j = 0; j < imgs.length; j++) {
    $('.carousel').append(Imgs[j])
  }


//carousel section

$('.carousel').slick({
  speed: 1000,
  slidesToShow: 1,
  slidesToScroll: 1,
  prevArrow: '<button class="slide-arrow prev-arrow"></button>',
  nextArrow: '<button class="slide-arrow next-arrow"></button>', 
 });

html

<div class="carousel">

</div>