jQuery 스크롤 가능 동적

Question

해상도에 따라 하나의 슬라이드에서 항목의 양을 동적으로 변경해야하는 사이트를 만들고 있습니다. 여기

<div class="scrollable"> 

    <!-- root element for the items --> 
    <div class="items"> 

     <!-- 1-5 --> 
     <div> 
     <img src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg" /> 
     <img src="http://farm4.static.flickr.com/3089/2796719087_c3ee89a730_t.jpg" /> 
     <img src="http://farm1.static.flickr.com/79/244441862_08ec9b6b49_t.jpg" /> 
     <img src="http://farm1.static.flickr.com/28/66523124_b468cf4978_t.jpg" /> 
     <img src="http://farm1.static.flickr.com/164/399223606_b875ddf797_t.jpg" /> 
     </div> 

     <!-- 5-10 --> 
     <div> 
     <img src="http://farm1.static.flickr.com/163/399223609_db47d35b7c_t.jpg" /> 
     <img src="http://farm1.static.flickr.com/135/321464104_c010dbf34c_t.jpg" /> 
     <img src="http://farm1.static.flickr.com/40/117346184_9760f3aabc_t.jpg" /> 
     <img src="http://farm1.static.flickr.com/153/399232237_6928a527c1_t.jpg" /> 
     <img src="http://farm1.static.flickr.com/50/117346182_1fded507fa_t.jpg" /> 
     </div> 

     <!-- 10-15 --> 
     <div> 
     <img src="http://farm4.static.flickr.com/3629/3323896446_3b87a8bf75_t.jpg" /> 
     <img src="http://farm4.static.flickr.com/3023/3323897466_e61624f6de_t.jpg" /> 
     <img src="http://farm4.static.flickr.com/3650/3323058611_d35c894fab_t.jpg" /> 
     <img src="http://farm4.static.flickr.com/3635/3323893254_3183671257_t.jpg" /> 
     <img src="http://farm4.static.flickr.com/3624/3323893148_8318838fbd_t.jpg" /> 
     </div> 

    </div> 

</div> 

확인을 기본 마크 업이 지금은 내가 1440 노호 해상도가 있다면, 난 단지 보여줄 것이라는 점을 설정하고 싶습니다 더 나은 이해를 위해

스크롤 JQuery와 도구를 사용하고 있습니다 예 3 이미지

<div class="scrollable"> 
     <!-- root element for the items --> <div class="items"> 

     <!-- 1-3 --> 
     <div> 
     <img src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg" /> 
     <img src="http://farm4.static.flickr.com/3089/2796719087_c3ee89a730_t.jpg" /> 
     <img src="http://farm1.static.flickr.com/79/244441862_08ec9b6b49_t.jpg" /> 
     </div> 

     <!-- 3-6 --> 
     <div> 
     <img src="http://farm1.static.flickr.com/163/399223609_db47d35b7c_t.jpg" /> 
     <img src="http://farm1.static.flickr.com/135/321464104_c010dbf34c_t.jpg" /> 
     <img src="http://farm1.static.flickr.com/40/117346184_9760f3aabc_t.jpg" /> 
     </div> 

    ..etc 
      </div> 
    </div> 

나는 screen.width(); 기능을 어떻게 슬라이스하고 해상도에 따라 구문 분석합니까?

의견을 보내 주셔서 감사합니다.

Answer 1

를 그 유일한 규칙 인 경우, 다음 설정하려는 것 :

​$(document).ready(function() { 
    if (screen.width < 1440){ 
     var i = $("img").clone(); 
     $('.items div').remove(); 
     for (var a = 0; a <= i.length/3; a++){ 
      var d = $('<div></div>'); 
      d.append(i.slice(a * 3 - 3, a * 3)); 
      $('.items').append(d); 
     } 
    } 
});​ 

나는이 배를 해결할 생각합니다. http://jsfiddle.net/NBf2u/ 재생 공간이 제공됩니다.

Answer 2

현재 JQuery와의 :gt 선택기를 사용할 수 있습니다

$(function(){ 
if (screen.width() < 1440) 
{ 
    $('div.scrollable img:gt(2)').hide(); // hide other images and show only three 
} 
// you can setup similar if conditions for other cases. 
});