轻拂一下，如何在没有左键单击或Tab的情况下使用箭头键？

时间：2019-02-27 16:59:56

标签： javascript jquery flickity

this is Flickity

我无法用清晰的英语表达，因此，请尽可能帮助我编辑问题。

这是我的网页 

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。而且我的页面只包含一个浮点数。

enter image description here

官方网站告诉我们必须先使用tab（或leftclick），然后才能真正使用箭头键更改单元格。

2 个答案:

答案 0 :(得分：0)

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

答案 1 :(得分：0)

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

将此添加到JS 

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

function init() {
  let flkty = new Flickity(".carousel");
  flkty.focus()
}
相关问题
最新问题