使用Flickity在历史时间表上对年份进行分组

问题描述

我对Flickity不熟悉，一直在尝试模拟以下时间轴设置history timeline slider。该站点正在使用Flickity显示历史记录时间轴。我已经使用了基本代码，但是无法弄清楚如何将data-nav和data-nav-title属性连接在一起，以便将特定年份分组在一起。 Nature网站上的以下代码似乎可以控制分组，但是我不确定如何在我的设置中实施该分组。我在Codepen上创建了一个演示。

e.on("select.flickity",function(j) {
    var l=b(j.target);
    var f=l.closest(".c-timeline__wrapper");
    var g=l.data("flickity");
    var i=f.find(".carousel-nav");
    var k=i.find(".carousel-cell");
    var h=l.find(".carousel-cell").eq(g.selectedindex).data("navTitle");
    k.filter(".is-nav-selected").removeClass("is-nav-selected border-secondary");
    k.filter('[data-nav="'+h+'"]').addClass("is-nav-selected border-secondary")
});

b(".carousel-nav").on("click",".carousel-cell",function(h) {
    var i=b(h.target);
    var k=i.data("nav");
    var g=i.closest(".c-timeline__wrapper");
    var f=g.find(".carousel-main");
    var j=f.find(".carousel-cell").filter('[data-nav-title="'+k+'"]').eq(0).index();
    f.flickity("select",j)
})
};

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）