В Flickity, как я могу использовать клавиши со стрелками без щелчка левой кнопкой мыши или вкладки?

это Фликити

Я не могу четко выразить свое мнение по-английски, поэтому, если возможно, помогите отредактировать мой вопрос.

Это моя веб страница

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

Когда я открываю эту страницу, я не могу использовать кнопку со стрелкой для навигации по другой ячейке карусели.

Я могу использовать стрелку только после того, как щелкну мышью на этой странице.

Как я могу отредактировать код, чтобы я мог использовать стрелки в самом начале, не нажимая на него? то есть я открываю эту страницу в своем браузере, и затем я могу использовать стрелку (37,39), чтобы немедленно повернуть ее. Я хочу использовать клавиатуру Handlers, как только я открою страницу

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, И моя страница содержит только один фильм.

Официальный сайт говорит, что сначала мы должны использовать вкладку (или щелчок левой кнопкой мыши), а затем мы действительно можем использовать клавиши со стрелками для изменения ячеек.

Источник

2 ответа

Решение

Это почти невозможно, кто-то другой ответит на этот вопрос, а бывший ответчик отклонил мое редактирование, поэтому я должен ответить сам.

Добавление этого в JS

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

function init() {
  let flkty = new Flickity(".carousel");
  flkty.focus()
}
Источник

Вам нужно создать новый 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>

Источник
Другие вопросы по тегам