javascript: how to add an attribute to a child element ONLY if a parent element is active AND child element has a certain class?

Question

I'm trying to recreate a grid carousel slider with using 2 one-row sliders instead of 1 two-row slider,

because I want to highlight only the single element that is "centered" AND "active" and in a two-row slider 2 elements are "centered" and "active".

I've run into two problems, because frankly my javascript is not that good.

Check out this pen [http://codepen.io/mathiasvanderbrempt/pen/zGpGvd

js: $('.carousel:focus .frame.slick-center').css('border', '1px solid red');

2nd problem:

This would go with a event listener for scroll direction to make the slider "focused" to allow for directional arrow use (left and right). meaning: if I would press arrow up, the window would move up(or can you cancel this?) and the active slider would be the top one, giving the ability to use arrow left and arrow right to navigate straight away, and vice versa. [1]: http://codepen.io/mathiasvanderbrempt/pen/zGpGvd

Answer 1

Use CSS, not jQuery:

.carousel:focus .frame.slick-center {
    background-color: red;
}