slick: Arrow key navigation not working

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.

About this issue

Original URL
State: closed
Created 9 years ago
Comments: 22 (4 by maintainers)

Most upvoted comments

@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');
                }
            });

+45

Tantacula on Oct 17, 2016

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

+12

davegreenwp on Feb 7, 2017

@v3nt how about

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

leggomuhgreggo on Mar 9, 2016

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

hurradieweltgehtunter on Nov 30, 2017

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

v3nt on Mar 9, 2016

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.

ImBobby on Jan 8, 2015