Изменить фоновое изображение на мобильные устройства

Question

Так что я использую slickslider для создания слайдера на моей домашней странице. Большие изображения ползунка: 1920 x 700. Высота ползунка на больших экранах составляет 700 пикселей, и он сокращается до 400 пикселей на мобильных устройствах.
Я хочу создать функции 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 Слайдер anochered на герой-слайдер-компоненте

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

Лучше использовать метод @media в css.

/* This is for desktop and laptop */ 
@media screen and (min-width: 992px) { 
    .hero-slider-image { 
     background-image:url('http://www.example.com/desktop-image.jpg'); 
    } 
} 

/* This is for normal tabs */ 
@media screen and (min-width: 751px) { 
    .hero-slider-image { 
     background-image:url('http://www.example.com/tab-image.jpg'); 
    } 
} 

/* This is for mobiles */ 
@media screen and (max-width: 750px) { 
    .hero-slider-image { 
     background-image:url('http://www.example.com/mobile-image.jpg'); 
    } 
}