Append dynamic content from WP to Slick

So this is the deal: I have a slick carousel which loads different parts from a WordPress post on different slides. One of the slides holds a gallery (handmade query, no plugins.), which can grow a lot depending on how many items are queried inside it. My question is the following:

How can I slice gallery elements by 6 and add them as slides (I’m using .slide as the slide selector) on the parent slider, by batches of 6? More clearly, I need to cut them from inside the gallery slide, then wrap them by groups of 6 inside a .slide div and have them added by slick as slides. I’ve tried the following, both in jQuery & PHP:

jQuery

var divs = $('.gallery__item');


/* Option 1 - Slicing: doesn't work */

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 */

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 */

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 itself has a method called slickAdd, but that isn’t working either. :/ Any ideas?

Read more here: Append dynamic content from WP to Slick

Leave a Reply

Your email address will not be published. Required fields are marked *