さまざまな画面サイズのjQueryスライダプラグインに異なる画像を表示するにはどうすればいいですか？

Question

jQueryスライダプラグインを使用して、モバイルデバイスやiPadデバイス用のポートレートイメージ、および大画面デバイス用のランドスケープイメージを表示しようとしています。しかし、私は成功していません。私はいくつかの戦略を試みましたが、誰も働いていませんでした。あなたがこれを行う方法を知っているなら、あなたの助けは大いに感謝されるでしょう。

HTML

<div id="container"> 
    <div id="slider" class="nivoSlider"> 

     <img src="../Images/islal11.JPG" data-thumb="../Images/islal11.JPG" alt="Little girl wearing Tomatis headphones" class="image large"/> 
     <img src="../Images/bellal12.jpg" data-thumb="../Images/bellal12.jpg" alt="Girl with Tomatis headphones two" class="image large"/> 
     <img src="../Images/islal12.JPG" data-thumb="../Images/islal12.JPG" alt="Little girl wearing Tomatis headphones 2" class="image large"/> 

     <img src="../Images/bellap11.JPG" data-thumb="../Images/bellap11.JPG" alt="Girl with Tomatatis headphones" class="image small"/> 
     <img src="../Images/islap11.JPG" data-thumb="../Images/islap11.JPG" alt="Little girl wearing Tomatis headphones" class="image small"/> 
     <img src="../Images/islap12.jpg" data-thumb="../Images/islap12.jpg" alt="Girl with Tomatis headphones two" class="image small"/> 

    </div> <!--closing slide div--> 
</div><!--closing container div--> 

Answer 1

あなたは、CSSだの内側にあなたがID #slider最大幅だ付けます。

#slider{ 
    max-width: 640px; 
} 

あなたは@mediaとモバイルサイズに基づいて、最大幅またはMAX-heigthを与えることができます： http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

私は、これはあなたを助けることを願っています。あなたが本当にスライダーの仕事に画像を削除する必要がある場合

Answer 2

#slider .large { 
    display: none; 
} 


@media (min-width: 640px) { 

    #slider .small { 
     display: none; 
    } 

} 

適切にあなたはjQueryの

if(window.innerWidth < 650) { //if less than 650px remove large images 
    $('.#slider img.large').remove(); 
} else { //if equal or more than 650px remove small images 
    $('.#slider img.small').remove(); 
} 

スライダートリガー前にこれを呼び出すようにしてください使用することができます。