在 Foundation 6 响应式手风琴选项卡容器中初始化光滑的滑块

Question

我正在尝试在Foundation 6响应式手风琴/选项卡容器中初始化几个光滑的滑块。我可以让标签正常工作，但不是在手风琴中......这是选项卡/手风琴导航的容器：

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

所以似乎发生的事情是，当有人点击列表元素时，基金会插件正在使用 li 元素作为currentTarget，在向上或向下手风琴事件中，它似乎在尝试使用a元素？ 在任何一种情况下，任何人都知道如何从 li 元素获取数据选项卡目标的值？

更新/解决方案：

我像这样解决了这个问题：

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