調整瀏覽器大小時展開我的傳送帶

Question

$(function(){ 

    var x = $('.my__list').children(); 

    for (var i = 0; i < x.length ; i += 2) { 

     var windowSize = $(window).width(); 
     if(windowSize < 500) { 
      x.slice(i,i+1).wrapAll('<div class="'+ i +'"></div>'); 
     } 
     if(windowSize > 500) { 
      x.slice(i,i+2).wrapAll('<div class="'+ i +'"></div>'); 
      console.log("test"); 
     } 
    } 
}); 

我想在瀏覽器寬度更改時展開所有列表。目前只有當用戶刷新瀏覽器時纔會改變。謝謝。

我從https://codepen.io/Kibs/pen/aNzvBG

Answer 1

我通過固定的問題使用slick.js中的一行功能和一些修改。當我在響應設置中使用它時，有一些從rows: 2到rows: 1的錯誤。

我從here得到了答案，它爲我的作品：

Slick.prototype.buildRows = function() { ... }

Slick.prototype.cleanUpRows = function() { ... }

和IF（.options.rows> 1）改變，如果條件如果（可供選項.rows> 0）

Answer 2

源，您可以掛鉤此到窗口調整大小事件，或在JQuery中$(window).resize()：

$(function(){ 
    resizeAndWrap(); // Runs once on page load 
    $(window).resize(function() { 
     resizeAndWrap(); // Runs everytime window is resized 
    }); 
}); 

function resizeAndWrap() { 
    var x = $('.my__list').children(); 

    for (var i = 0; i < x.length ; i += 2) { 
     var windowSize = $(window).width(); 

     if(windowSize < 500) { 
      x.slice(i,i+1).wrapAll('<div class="'+ i +'"></div>'); 
     } 

     if(windowSize > 500) { 
      x.slice(i,i+2).wrapAll('<div class="'+ i +'"></div>'); 
      console.log("test"); 
     } 
    } 
} 

這裏是codepen example with my changes