モバイルデバイスの背景イメージを変更する

Question

私はホームページにスライダーを作成するためにslicksliderを使用しています。 スライダの大きな画像は1920 x 700です。大きな画面でのスライダの高さは700pxで、携帯端末では400pxまで縮小しています。
は私が私のスライドから2のデータ属性を取得jqueryの関数を作成したい（データ-IMG-モバイルおよびデータ-IMG-大 - 魔女は、画像からリンクがある）と比べて、ビューポートた内容に応じて、背景画像を変更します。 （小 - 大型デバイス）
私は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> 

スリックスライダーは、ヒーロー・スライダー・コンポーネントに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

cssで@mediaメソッドを使用する方が良いです。

/* 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'); 
    } 
}