Hubspotカスタムモジュールとブートストラップカルーセル

Question

Hubspotはカスタムモジュールの周りにラッパーを追加します。ブートストラップのカルーセルでこのコードを動作させる方法を模索しています。任意のアイデアcarouselプラグインに、この追加されたHubspotスパンとdivラッパーの中で自分のアイテムクラスをターゲットにする方法を教えてください。

<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

カスタムモジュールから「アイテム」を削除する方法です。代わりに、各カスタムモジュールをjqueryでラップします。たとえば、クラス "bootstrap-flex"を含む列を与えます。次に、これを追加します。

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