Hubspot benutzerdefinierte Module und Bootstrap Karussell

Question

Hubspot fügt Wrapper um seine benutzerdefinierten Module. Ich möchte unbedingt einen Weg finden, wie dieser Code für Bootstrap-Karussells funktioniert. Irgendwelche Ideen, wie kann ich das Karussell-Plugin wissen, um meine Artikelklasse innerhalb dieser zusätzlichen Hubspot Span- und div-Wrapper anzusprechen?

<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 --> 

Answer 1

Die Art, wie ich es mache, ist das "Element" aus dem benutzerdefinierten Modul zu entfernen. Umschließen Sie stattdessen jedes benutzerdefinierte Modul mit jquery. Zum Beispiel geben Sie Ihrer Spalte, die die Module enthält, die Klasse "bootstrap-flex". Dann fügen Sie das hinzu:

$('.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>"); 
});