javascript - 更改移动设备上的背景图像

Question

所以我使用 slickslider 在我的主页中创建 slider 。 slider 大图像为 1920 x 700。 slider 在较大屏幕上的高度为 700 像素，在移动设备上会缩小至 400 像素。
我想创建一个 jquery 函数，从我的幻灯片中获取 2 个数据属性( data-img-mobile 和 data-img-large - 它们是图像中的链接)，然后根据视口(viewport)更改背景图像。( 小- 大型设备)
我是 jquery 新手，所以你能帮助我吗？
非常感谢!

<div class="hero-slider-wraper">
 <div class="hero-slider">
  <div class="hero-slider-component">
   <div class="hero-slider-image" data-img-mobile="" data-img-large="http://sitename.com/wp-content/uploads/2017/01/home1.jpg" style="background-image:url('http://sitename.com/wp-content/uploads/2017/01/home1.jpg');"></div>
   <div class="hero-slider-image" style="background-image:url('http://sitename.com/wp-content/uploads/2017/01/home2.jpg');"></div>
   <div class="hero-slider-image" style="background-image:url('http://sitename.com/wp-content/uploads/2017/01/home3.jpg');"></div>
   </div>
  </div>
 </div>
</div>

Slick Slider 已固定在 Hero-slider-component 上

Answer 1

您可以使用 CSS 媒体查询来实现此目的。例如:

@media (min-width: 400px) and (@max-width: 600px) // Or whatever the size of your mobile device is.
{
    .hero-slider-image {
        background-image:url('http://www.example.com/mobile-image.jpg')
    }
}

@media (min-width: 601px)
{
    .hero-slider-image {
        background-image:url('http://www.example.com/desktop-image.jpg')
    }
}