Question

所以我使用slickslider在我的主页上创建一个滑块。滑块大图像为1920 x 700.滑块在较大屏幕上的高度为700px，并且在移动设备上缩小至400px。我想创建一个jquery函数，从我的幻灯片中获取2个数据属性（data-img-mobile和data-img-large - 来自图像的链接），然后根据视口更改背景图像。 - 大型设备）
我是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在英雄 - 滑块组件

上被激活

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')
    }
}

Answer 2

最好在css中使用@media方法。

mcount

在移动设备上更改背景图像

2 个答案: