jQuery Scrollable Dynamic

Question

Я делаю сайт, на котором мне нужно динамически изменять количество элементов на одном слайде в зависимости от разрешения. Я использую прокручиваемый Jquery Tools

Для лучшего понимания, вот основная разметка

<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, я бы показывал только, например. 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

Здесь вы можете использовать селектор 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.
});

Answer 2

, если это ваше единственное правило, тогда вы захотите установить:

​$(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/ игровое пространство предусмотрено.