Question

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

如何将图库元素按6分割并将其作为幻灯片添加为幻灯片（我使用.slide作为幻灯片选择器）在父级滑块上，按批次为6？更清楚的是，我需要从画廊幻灯片中剪切它们，然后在.slide div内用6个组包装它们，然后通过光滑的幻灯片添加它们。我在jQuery和＆amp ;;中尝试了以下内容。 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的{{3}}，但它也不起作用。：/任何想法？

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

  }

}

将WP中的动态内容附加到Slick

1 个答案: