mein Karussell auspacken, wenn der Browser die Größe

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"); 
     } 
    } 
}); 

ich alle meine Liste auspacken wollen, wenn die Breitenänderung des Browsers. Im Moment ändert es sich nur, wenn der Benutzer den Browser aktualisiert. Vielen Dank.

erhalte ich die Quelle von https://codepen.io/Kibs/pen/aNzvBG

Answer 1

I ist das Problem behoben, indem mit einer Zeilenfunktion von slick und einigen Änderungen in slick.js. Es gibt einige Bugs von rows: 2 bis rows: 1, wenn ich es in Responsive-Einstellungen verwendet habe.

bekam ich die Antwort von here und es funktioniert für mich:

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

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

und die, wenn die Bedingung ändern aus if (.options.rows> 1), wenn (.Optionen .Rows> 0)

Answer 2

Sie dieses Ereignis bis zum Fenstergröße ändern kann Haken oder in 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"); 
     } 
    } 
} 

Hier ist die codepen example with my changes