将动态内容从 WP 附加到 Slick答案

【问题标题】：Append dynamic content from WP to Slick将动态内容从 WP 附加到 Slick
【发布时间】：2017-05-03 20:43:40
【问题描述】：

所以这就是交易：我有一个光滑的轮播，可以从不同幻灯片上的 WordPress 帖子加载不同的部分。其中一张幻灯片包含一个画廊（手工查询，没有插件。），它可以增长很多，具体取决于其中查询的项目数量。我的问题如下：

如何将画廊元素分割为 6 并将它们添加为幻灯片（我使用 .slide 作为幻灯片选择器）在父滑块上，每批 6 个？更清楚地说，我需要从画廊幻灯片中剪切它们，然后将它们按 6 组包装在 .slide div 中，并通过 slick 将它们添加为幻灯片。我在 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 本身有一个名为 slickAdd 的 method，但这也不起作用。 :/ 有什么想法吗？

【问题讨论】：

标签： javascript php jquery wordpress slick.js

【解决方案1】：

所以这里有一个快速修复。如果有人有更好的方法，请随时发表评论。

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

  }

}

【讨论】：