Foundation 6レスポンスアコーディオンタブコンテナ内の滑らかなスライダを初期化する

Question

Foundation 6レスポンスアコーディオン/タブコンテナでいくつかのスリックスライダを初期化しようとしています。私はここ....タブがアコーディオンで罰金ではなく、作業を取得することができ、タブ/ accordioni NAVのコンテナです：

<ul class="tabs" data-responsive-accordion-tabs="tabs small-accordion medium-tabs" id="homeContentTabs"> 
    <li class="tabs-title is-active slickTrigger" data-tab-target="slickFeatured"><a href="#featured" aria-selected="true">Featured Events</a></li> 
    <li class="tabs-title slickTrigger" data-tab-target="slickLatest"><a href="#latest">Latest Videos</a></li> 
    <li class="tabs-title slickTrigger" data-tab-target="slickViewed"><a href="#viewed">Most Viewed</a></li> 
    <li class="tabs-title yourContent slickTrigger" data-tab-target="slickSaved"><a href="#saved">Your Content</a></li> 
</ul> 

といくつかのjavascript：

$('[data-responsive-accordion-tabs]').on('change.zf.tabs up.zf.accordion down.zf.accordion', function(event, tab) { 
    var target = '.'+$(tab).attr('data-tab-target'); 
    $(target).slick({--slick options-- }); 
}); 

だから何がいるようです起こっているのは、誰かがリスト要素をクリックしたときに、Foundationプラグインがアップまたはダウンのアコーディオンイベントでli要素をcurrentTargetとして使用していると、a要素を使用しようとしているようです。 どちらの場合でもli要素からdata-tab-targetの値を取得する方法は誰にも分かりますか？

UPDATE/SOLUTION：

私はこのような問題を解決しました：

// find and initialize any ~visible~ slick elements 
$('.slick-carousel').each(function(){ 
    var slickHidden =$(this).parent().attr('aria-hidden'); 
    var target = $(this).attr('id'); 
    var view = $(this).attr('data-view'); 
    if(!slickHidden){ 
     slickInit(target,view); 
    } 
}) 


// init slick on tab/accordion click 
$('[data-responsive-accordion-tabs]').on('change.zf.tabs down.zf.accordion', function(event, obj) { 
    // target can be either a tab or link in accordion title 
    var target = $(obj).attr('data-tab-target'); 
    if(!target){ 
     var target = $(obj).parent().attr('data-tab-target'); 
    } 
    // test if target is already init, if no ~ init! 
    if(!$('#'+target).hasClass('slick-initialized')){ 
     slickInit(target); 
    } 

}); 


// initialize slick target 
function slickInit(target,view){ 
    // initialize slick 
} 

Answer 1

私はこの同じ問題、それはディスプレイを有する基礎アコーディオンを持っていた：なしスリックは、高さと休憩を見つけることができません。

以下は私のために働きました。アコーデオンが開いているときに滑らかに初期化する必要があります。ファンデーションには使用できるイベントが組み込まれています。

$('.faq').on('down.zf.accordion', function() { 
    $('.faq_slider').slick({ 
     slidesToShow: 4, 
     slidesToScroll: 4, 
     arrows: true, 
    }); 
});