wrapping a bootstrap carosuel around blog posts avada wordpress theme with Jquery

I am using the Avada theme with WordPress and I am utilising the blog functionality. I would like to create a carousel wrapped around the blog posts, in intervals of 3.

I have successfully wrapped the first 3 blog posts with the appropriate HTML. I am not sure which version of the Bootstrap the latest version of Avada is using, so I have just used Bootstrap 3 classes to be safe. Does it load Bootstrap at all?

I have not included navigation arrows, however they are showing. I would like the indicators which only should display once at the top. 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) {
    carosuelPost.slice(i, i + 3).wrapAll('<div class="item"> </div>');
  }
});

18 thoughts on “wrapping a bootstrap carosuel around blog posts avada wordpress theme with Jquery”

Leave a Comment