在flickity中，如何在没有左键单击或tab的情况下使用箭头键？

Question

我不能用英语表达清楚，所以如果可以请帮助编辑我的问题。

这是我的网站页面

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

当我打开此页面时，我无法使用箭头键导航不同的轮播单元格。

我只能使用方向键在我用鼠标点击该页面后。

如何编辑代码，以便在一开始就可以使用 arrowkey 而无需单击它？即我在浏览器中打开此页面，然后我可以使用箭头键 (37,39) 立即旋转它。我想在打开页面后使用 keyboardHandlers

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 ]();
},

};

我可以编辑所有源代码，包括 flickity.pkgd.min.js。而我的页面只有一个flickity。

官网告诉我们必须先使用tab键（或左键），然后才能真正使用方向键来改变单元格。

Answer 1

您需要在应用初始化时创建一个新的 Flickity 实例，然后对其调用 next()。您可以在下面的演示中看到，一旦您加载应用程序，它就会滚动到轮播中的下一个项目：

let flkty;
const delayMs = 1000;

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

function init(shouldAutoScroll) {
  flkty = new Flickity(".carousel");

  if (shouldAutoScroll) {
    //Start an carousel auto scroll
    autoScroll();
  } else {
    //Just flip to next item and that's it..
    flkty.next();
  }
}

function autoScroll() {
  if (flkty) {
    setInterval(function() {
      flkty.next();
    }, delayMs);
  }
}

.carousel-cell {
  min-height: 30em;
  padding: 1em;
  margin: 0 3em 0 3em;
  width: calc( 100vw - 9em);
  max-width: 40em;
  box-shadow: 0px 16px 20px 5px #7777;
}

<head>
  <link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
</head>

<body>
  <div class="carousel" id="main" data-flickity='{ 
    "cellAlign": "center",
    "contain": true,
    "adaptiveHeight":true,
    "freeScroll": false,
    "accessibility":true,
    "wrapAround": true,
    "setGallerySize":true,
    "hash":true,
    "selectedAttraction": 0.05,
    "friction": 0.3,
    "prevNextButtons":false
    }'>
    <div class="carousel-cell" id="carousel-cell1">1LONGLONGLONGLONG</div>
    <div class="carousel-cell" id="carousel-cell2">2LONGLONGLONGLONG</div>
    <div class="carousel-cell" id="carousel-cell3">3LONGLONGLONGLONG</div>
  </div>
  <script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>

</body>

Answer 2

这个问题别人几乎不可能回答，而且之前的回答者拒绝了我的编辑，所以我只好自己回答。

将此添加到 JS

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

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

在flickity中，如何在没有左键单击或tab的情况下使用箭头键？

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

javascript

jquery

flickity