How can I programatically get control of slick.js carousel?

Question

Normally I get control of carousels ( control you ask, means the state where I can use my arrow keys to slide them ) via clicking slick.js carousels.

But I'm trying to do this with javascript code, to implement more flexible interface in my project.

Is this carousel control acquisition can be implemented programmatically? I have tried $('#my-slick-carousel').focus() but it didn't worked.

Any workarounds even not specific to the slick.js are OK, as it seems like it's a problem of delegating keypress events to the carousel jquery objects.

Answer 1

You were so close with your original solution attempt.

Instead of $('#my-slick-carousel').focus() , you should use $('#my-slick-carousel').find('.slick-list').focus() , because the keyboard event handlers are registered on the .slick-list element, instead of the root carousel element.