Search code examples
javascriptjqueryflickity

In flickity, how can I use arrowkeys without leftclick or tab?

this is Flickity

I cannot express in English clearly, so if possible please help editing my question.

This is my web page

https://codepen.io/haozun/pen/ywNjvQ

When I open this page, I cannot use arrowkey to navigate different carousel-cell.

I can only use arrowkey after I have mouse clicking on that page.

How can I edit the code so that I can use arrowkey at the very beginning without click on it? i.e. I open this page in my browser, and then I can use arrowkey(37,39) to rotate it immediately. I want to use the keyboardHandlers once I open the page

Flickity.keyboardHandlers = {
// left arrow
37: function() {
  var leftMethod = this.options.rightToLeft ? 'next' : 'previous';
  this.uiChange();
  this[ leftMethod ]();
},
// right arrow
39: function() {
  var rightMethod = this.options.rightToLeft ? 'previous' : 'next';
  this.uiChange();
  this[ rightMethod ]();
},

};

I can edit all source code, including flickity.pkgd.min.js. And my page only contains one flickity.

enter image description here

The official site tells we must use tab (or leftclick) first, then we can really use arrowkeys to change cells.

Solution

  • It almost impossible someone-else will answer this question, And the former answerer has rejected my edit, so I have to answer myself.

    Adding this to JS

    document.addEventListener("DOMContentLoaded", function() {
  init();
});

function init() {
  let flkty = new Flickity(".carousel");
  flkty.focus()
}