Hubspot adds wrappers around its custom modules. I desperately want to find a way to make this code work for Bootstrap carousels. Any ideas how can I let the carousel plugin know to target my item class inside this added Hubspot span and div wrappers?
<div class="carousel-inner">
<!-- this is added by Hubspot wraps all items -->
<span id="hs_cos_wrapper_carousel_items" class="hs_cos_wrapper hs_cos_wrapper_widget_container hs_cos_wrapper_type_widget_container" style="" data-hs-cos-general-type="widget_container" data-hs-cos-type="widget_container">
<!-- this div is added by Hubspot on each item -->
<div id="hs_cos_wrapper_widget_1462360389044" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_custom_widget" style="" data-hs-cos-general-type="widget" data-hs-cos-type="custom_widget">
<!-- finally, we have the carousel items here -->
<div class="item">
<div class="hero" style="height: 765px; min-height: 300px; background-image: url(image.jpg);"></div><!-- end hero-->
<div class="container carousel-caption">Test hero</div>
</div><!-- carousel item -->
</div> <!-- added Hubspot div around each item div -->
</span> <!-- added Hubspot span -->
</div> <!-- carousel-inner div -->
The way I do it is to remove the "item" from the custom module. Instead wrap each custom module in it with jquery. For example give your column that contains the modules the class "bootstrap-flex". Then add this:
$('.bootstrap-flex > span').wrapInner("<div class='carousel-inner'></div>");
$('.carousel-inner .hs_cos_wrapper_type_custom_widget').each(function() {
$(this).wrap("<div class='item'></div>");
});