Working on a carousel and I have two issues:

1. When the page loads, the last slide is visible, not the first, which is very bizarre
2. For accessibility reasons, I’m making my carousel operate primarily on focus events, not click events. So when a user is focused on a slide, pressing the tab key slides the next one into view. That works fine, but I want to make the corresponding nav link active when they do, as well as when they click next. Right now I only have that set up for clicks in the nav. So my question is, how can I universally change the class of the nav links on focus, rather than click?

There’s a lot going on in there, so here are the relevant portions of code. Issue 1 (code that should make first slide visible):

$(".carousel nav ul li a").eq(0).addClass("active").attr("aria-current","true");
    $(".carousel .content .section").eq(0).removeClass("collapsed").addClass("expanded").focus();

Issue 2: the code that makes the nav link active when you click it. Want to make it so it just changes on slide focus:

$(".carousel nav a").click(function (event) {
        event.preventDefault(); 
        $(".carousel nav a.active").removeClass("active"); 
        $(this).addClass("active"); 
        var target = $($(this).attr('href'));
        target.focus();
    });

Codepen here: https://codepen.io/tactics/pen/GRbWdyz

Thanks!