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

【问题标题】：In flickity, how can I use arrowkeys without leftclick or tab?在 flickity 中，如何在没有左键单击或标签的情况下使用箭头键？
【发布时间】：2019-03-01 10:40:13
【问题描述】：

this is Flickity

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

这是我的网页页面

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

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

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

如何编辑代码，以便在开始时使用箭头键而不点击它？即我在浏览器中打开此页面，然后我可以使用箭头键（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（或leftclick），然后我们才能真正使用箭头键更改单元格。

【问题讨论】：

标签： javascript jquery flickity

【解决方案1】：

其他人几乎不可能回答这个问题，而且前回答者拒绝了我的编辑，所以我必须回答自己。

在 JS 中添加这个

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

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

【讨论】：

【解决方案2】：

您需要在应用初始化时创建一个新的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>

【讨论】：