用 Jquery 围绕博客文章 avada wordpress 主题包装引导轮播

Question

我正在使用带有 Wordpress 的 Avada 主题，并且正在使用博客功能。 我想创建一个围绕博客帖子的轮播，间隔为 3。

我已经用适当的 HTML 成功地包装了前 3 篇博客文章。 我不确定 Avada 的最新版本使用的是哪个版本的 Bootstrap，所以为了安全起见，我刚刚使用了 Bootstrap 3 类。 它会加载 Bootstrap 吗？

我没有包括导航箭头，但是它们正在显示。 我想要只应在顶部显示一次的指标。 在第一个循环中，我需要将活动的 class 分配给 class 项目。

jQuery(document).ready(function() {
  jQuery('.post-slider-mango .fusion-posts-container').wrapAll('<div id="dog-slider" class="carousel slide" data-ride="carousel"><ol class="carousel-indicators"><li data-target="#dog-slider" data-slide-to="0" class="active"></li></ol><div class="carousel-inner"></div></div>');

  var carosuelPost = jQuery(".post-slider-mango .post");
  for (var i = 0; i < carosuelPost.length; i += 3) {
    carosuelPost.slice(i, i + 3).wrapAll('<div class="item"> </div>');
  }
});

Answer 1

关于： In on the first loop I need to assign the class active to the class item.

你可以试试：

jQuery(document).ready(function() {
  jQuery('.post-slider-mango .fusion-posts-container').wrapAll('<div id="dog-slider" class="carousel slide" data-ride="carousel"><ol class="carousel-indicators"><li data-target="#dog-slider" data-slide-to="0" class="active"></li></ol><div class="carousel-inner"></div></div>');

  var carosuelPost = jQuery(".post-slider-mango .post");
  for (var i = 0; i < carosuelPost.length; i += 3) {
    let activeClass = '';
    if(i == 0) activeClass = 'active';
    carosuelPost.slice(i, i + 3).wrapAll('<div class="item ' + activeClass + '"> </div>');
  }
});

如果单击“运行”按钮并打开控制台，则可以测试以下 jsfiddle 中的代码： https://jsfiddle.net/a4qf78ju/