アコーデオンとカルーセルを同期させるにはどうすればよいですか？

Question

私は2つのOwlカルーセルを使用していますが、それらは一緒に同期され、1つのメインイメージとサムネイルが下にあります。私はこのpenのコードを使用しています。

私もページにアコーディオンがあります。アコーディオンをサムネイルと同期させ、両方の方法で動作させる必要があります。アコーディオンをクリックするとサムネイルがアクティブになり、サムネイルをクリックするとアコーディオンが開きます。

私はデモhereを持っています。

私は両方にセレクタを追加しました：

サムネイルフクロウカルーセル

$i = 1; 

$html_out .= '<div class="item thumb" data-flavor="' . $i++ . '">'; 
    $html_out .= '<img class="slide-img-thumb" src="' . $slide . '" style="background: no-repeat center center; background-size: cover;" />'; 
$html_out .= '</div>'; 

アコーディオン

$i = 1; 
$html .= '<div class="x-accordion-heading">'; 
    html .= '<a class="x-accordion-toggle collapsed hvr-bounce-to-right" data-flavor="' . $i++ . '" data-cs-collapse-toggle="" data-cs-collapse-parent="#flavour-accordion">' . $title . '</a>'; 
$html .= '</div>'; 

各事からの主なお持ち帰りはどちらもdata-flavor='1'を持っているということで、 2、3、4などに増分します。

どのようにして2つを正しく同期できますか？

Answer 1

はこれを試してみてください：

jQuery("#sync1").on('changed.owl.carousel', function(e) { 
//Added the timeout so that transition completes in that time 
setTimeout(function(){ 
    var cEl = jQuery("#sync2 .owl-item.active.current"); 
    var item = cEl.children('.item'); 
    var flavor = Number(item.data('flavor'));  
    if(!isNaN(flavor)){ 
     var el = jQuery("[data-cs-collapse-toggle]").filter("[data-flavor='" + flavor + "']"); 
     if(el.length > 0){ 
      el.trigger('click'); 
     }   
    } 
}, 100); 
})