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

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

0 голосов
/ 27 февраля 2019

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

enter image description here

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

Ответы [ 2 ]

0 голосов
/ 01 марта 2019

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

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

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

function init() {
  let flkty = new Flickity(".carousel");
  flkty.focus()
}
0 голосов
/ 27 февраля 2019

Вам нужно создать новый экземпляр 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>
...