Dynamischen Inhalt von WP an Slick anhängen

Question

Also das ist der Deal: Ich habe ein glattes Karussell, das verschiedene Teile von einem WordPress Post auf verschiedenen Dias lädt. Eine der Folien enthält eine Galerie (handgefertigte Abfrage, keine Plugins.), Die je nach Anzahl der abgefragten Objekte stark anwachsen kann. Meine Frage ist folgende:

Wie kann ich Galerieelemente um 6 und Slides (ich verwende .slide als Schieberegler) auf dem übergeordneten Schieberegler, durch Stapel von 6? Genauer gesagt, muss ich schneiden Sie sie aus der Galerie Folie, dann wickeln sie von Gruppen von 6 in einem .slide div und haben sie von Slick als Folien hinzugefügt. Ich habe folgendes versucht, beide in jQuery & PHP:

jQuery

var divs = $('.gallery__item'); 


/* Option 1 - Slicing: doesn't work because it creates the slide div 
    inside the parent slide div */ 

for(var i = 0; i < divs.length; i+=6) { 
    divs.slice(i, i+6).wrapAll("<div class='slide'></div>"); 
} 

/* Option 2 - Slicing & Appending to rendered Slick Track: doesn't work 
    since it doesn't actually append it because slick-track is script-generated 
    when carousel is loaded */ 

for(var i = 0; i < divs.length; i+=6) { 
    divs.slice(i, i+6).wrapAll("<div class='slide'></div>") 
        .appendTo("<div class='slick-track'></div>"); 
} 


/* Option 3 - Index through each: doesn't work. Same error as 1 in any case. */ 

divs.each(function(i) { 
    if (i % 6 == 0) { 
    $(this).append('</div><div class="slide">'); 
    } 
}); 

PHP

$i = 1; 

<div class="slide"> 
    if ($wp_query->have_posts()) : while ($wp_query->have_posts()) : $wp_query->the_post(); [Example Query] 


    if($i % 6 == 0) {echo '</div><div class="slide">';} 

    $i++; endwhile; endif; 

</div> 

Slick selbst eine methodslickAdd genannt hat, aber das ist nicht arbeite entweder. :/ Irgendwelche Ideen?

Answer 1

Also hier ist eine schnelle Lösung. Wenn jemand einen besseren Weg hat, zögern Sie nicht zu kommentieren.

var contSlider = $('.content-carousel'), 
    divs = $('.gallery__item'), 
    slides = []; 


contSlider.slick({ 
    adaptiveHeight: true, 
    arrows: false, 
    dots: true, 
    infinite: false, 
    mobileFirst: true, 
    slide: '.slide', 
    slidesToShow: 1 }); 


if (divs.length > 6) { // If there are over 6 pics 

    // Slice them in batches of 6 
    for(var i = 0; i < divs.length; i+=6) { 
    var x = divs.slice(i, i+6); 
    slides.push(x); 

    // Remove elements from first slide 
    if(i >= 6) { 
     $(x).remove(); 
    } 

    } 

    // Iterate inside each batch of 6 
    for(i = 1; i < slides.length; i++) { 

    var y = []; 

    // Iterate inside child HTML Object containing divs 
    for(var j = 0; j < slides[i].length; j++) { 
     // Push each element's outerHTML 
     y.push(slides[i][j].outerHTML); 
    } 

    // Append to slider using Slick's slickAdd method 
    contSlider.slick('slickAdd', "<div class='slide'>" + y + "</div>"); 

    } 

}