Use Flickity to group years on history timeline

Question

I am new to Flickity and have been trying to emulate the following timeline setup history timeline slider. This site is using Flickity to display the history timeline. I have the basic code working, but have been unable to figure out how to connect the data-nav and data-nav-title attributes together in order to keep the specific years grouped together. The following code from the Nature site seems to control the grouping, but I am unsure of how to implement it on my setup. I have created a demo here on 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)
})
};