Question

我正在尝试在Foundation 6响应式手风琴/标签容器中初始化几个光滑的滑块。我可以让标签工作正常，但不能在手风琴中....这里是tab / 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-- });
});

所以似乎发生的事情是，当有人点击列表元素时，基础插件使用li元素作为currentTarget，在向上或向下的手风琴事件中，它似乎试图使用{ {1}}元素？在任何一种情况下，任何人都知道如何从li元素获取data-tab-target的值？

UPDATE /溶液

我解决了这个问题：

Answer 1

我有同样的问题，基础手风琴有它有一个显示：没有光滑找不到高度和休息。

以下对我有用，你需要在手风琴打开时初始化光滑，基础内置了你可以使用的事件。

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

在Foundation 6响应式折叠式标签容器中初始化一个光滑的滑块

1 个答案: