Working on a carousel and I have two issues:
- When the page loads, the last slide is visible, not the first, which is very bizarre
- 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!