Question

我正在使用两个同步的猫头鹰旋转木马，下面有一个主图像和缩略图。我正在使用此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等。

如何正确同步这两个？

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);
})

如何将手风琴与旋转木马同步？

1 个答案: