Slick: Arrow key navigation not working

[lcavezza]

Autoplay working well, but draggable and accessibility aren't working. The slides can't be dragged or moved with the right/left arrow keys.

$(document).ready(function(){
    $('.slider').slick({
      dots: true,
      focusOnSelect: true,
      autoplay: true,
      draggable: true,
      autoplaySpeed: 6000,
      infinite: true,
      pauseOnHover: false,
      swipeToSlide: true,
      arrows: false,
      accessibility: true,
    });
});

Thank you.

[kenwheeler]

Have you tabbed to slick?

[kenwheeler]

Also, what browser

[lcavezza]

Not working in both Chrome and Safari --

Sorry, unsure what you mean by tabbed to slick?

[kenwheeler]

I would need to see a JSFiddle to diagnose what's going on there

[lcavezza]

Sure, thanks. Here's the fiddle: http://jsfiddle.net/2qs311pc/

It isn't swiping on mobile, and also the right and left arrow keys don't work to move through the slides on desktop.

[ImBobby]

The slides can't be dragged or moved with the right/left arrow keys

just visited the fiddle, and it is draggable and left/array keys are working as expected. Tried in both Chrome and Safari.

[jmelvnsn]

I am experiencing a similar issue. Arrow nav is not activated on initial page load. Only when I drag the slide once do the arrow keys work. Seeing the same behavior in the above jsfiddle in Chrome and Firefox.

[ImBobby]

Ah, I get the picture now. The arrow keys are working only if the slider is focused. I revisited the fiddle above, and yes during initial load the arrow keys are not working. That's because the focused element is not the slider.

If you interact with the slider, either you click or drag it, then the arrow keys work.

[kenwheeler]

Yeah the reason is because if you have more than one, which one does it work for? You can manually rig this up using the slickNext/Prev methods and a key listener if you want.

[lcavezza]

Thanks, @kenwheeler. I figured out the problem I was having, it was because I was using SVGs, and they were wrapped in "object" tags. This caused the jquery events to not fire.

Appreciate the help!

[v3nt]

is there a way we can set the slider as focused when the page loads? ie so the keypresses work straight away?

[leggomuhgreggo]

@v3nt how about

$( window ).load(function() {
  $('.slider').focus()
});

[gitsaagar]

@leggomuhgreggo : I don't think that helps.
Can you please check this link and suggest where am I going wrong?
I added onload event as you suggested but the keyboard arrows doesn't seem to work on slider directly without clicking on slider, after a page load or reload.
http://www.umbrella-technologies.com/dev/swipe/

[Tantacula]

@gitsaagar Yes, .focus() will not work on divs and lists. Looks like the only solution is use key events

var $carousel = $('.stest');
$(document).on('keydown', function(e) {
                if(e.keyCode == 37) {
                    $carousel.slick('slickPrev');
                }
                if(e.keyCode == 39) {
                    $carousel.slick('slickNext');
                }
            });

[gitsaagar]

@Tantacula : Thankyou !!! Appreciate the Help!

[davetgreen]

Has anyone mastered getting the carousel to take keyboard focus programmatically? Really keen to be able to automatically give the carousel focus on a particular screen, but seem to be banging my head against a wall.

I've tried targeting the .slick-list element, adding tabindex=0 and then calling focus() but no joy.

[ImBobby]

I think you could listen to slick init event instead of window load. so e.g.

$('.elem').on('init', () => {
$('.elem').focus()
})

didn't have chance to test that snippet but that should work.
On Tue, Feb 7, 2017 at 01:24 Dave Green [e-mail] wrote:

Has anyone mastered getting the carousel to take keyboard focus
programmatically? Really keen to be able to automatically give the carousel
focus on a particular screen, but seem to be banging my head against a wall.

I've tried targeting the .slick-list element, adding tabindex=0 and then
calling focus() but no joy.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/kenwheeler/slick/issues/901#issuecomment-277768527,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AB_NYWMhvQYJUDF_42NTOeVZXSK-BqNpks5rZ2VxgaJpZM4DOBVH
.

[davetgreen]

This got it to work in the end $(document).find('.slick-list').attr('tabindex', 0).focus();

[simaks]

also you can try adding atribute [tabindex="-1"] to the .slider element, and then $('.slider').focus() trick should start working. Tested on bootstraps carousel https://v4-alpha.getbootstrap.com/components/carousel/
Thats because element must be focusable before you try to focus it

[FoulFoot]

This took me a couple of hours; I couldn't get any of the above suggestions to work:

-- $('.slider').focus() doesn't work; it correctly focuses on the slider, but it needs to focus on the first image in the slider.
-- I couldn't get $(document).find('.slick-list').attr('tabindex', 0).focus(); to work. Probably because there's other elements on my page that have a tabindex of zero. Trying to set the tabindex manually to something like 25 doesn't work; Slick overwrites it with its own tabindex values.

My solution was to give the "a" tag around the first image an id of "slicker". Then on pageload, grab the element (the "a" tag) with that id and focus on it.

HTML:

<div class="slider">
<a href="" id="slicker"><img src="test.jpg"></a></div>

JS:

window.onload = function() {
  document.getElementById('slicker').focus();
};

Hope this helps someone.

( and to get rid of the blue focus border, add a "style="outline:none;"" attribute to the "a" tag).

Foul

[hurradieweltgehtunter]

Ran into the same problem. I'm dynamically setting up the slider like a lightbox after a user clicks on an image.
My solution was to set a timeout before focusing:

$('.slider-1').on('init', function() {
  setTimeout(function() {
    $(document).find('.slick-list').attr('tabindex', 0).focus();
  }, 100);
});

Using only the init event did not help.
Another solution, might be helping someone