0

这是 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），然后我们才能真正使用箭头键更改单元格。

4

2 回答 2

1

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

将此添加到 JS

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

function init() {
  let flkty = new Flickity(".carousel");
  flkty.focus()
}
于 2019-03-01T02:24:02.450 回答
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>

于 2019-02-27T17:48:28.950 回答