← Все примеры

JavaScript Навигация etsy.com

Etsy: фотогалерея стрелками клавиатуры

Позволяет листать фото товара стрелками влево и вправо без использования мыши.

Код для копирования

// Browse the listing photo gallery with the left/right arrow keys
function thumbs() {
  return Array.from(document.querySelectorAll(
    '[data-component="listing-page-image-carousel"] '
    + 'button, .listing-page-image-carousel-component li button'));
}
document.addEventListener('keydown', function (e) {
  if (e.target.matches('input, textarea')) { return; }
  const list = thumbs();
  if (!list.length) { return; }
  let idx = list.findIndex(function (b) {
    return b.getAttribute('aria-current') === 'true'
      || b.classList.contains('is-selected');
  });
  if (e.key === 'ArrowRight') { (list[idx + 1] || list[0]).click(); }
  if (e.key === 'ArrowLeft') {
    (list[idx - 1] || list[list.length - 1]).click();
  }
});

Как использовать этот пример

  1. Скопируй код кнопкой выше.
  2. Установи JustZix (2 минуты) и открой расширение на нужной странице.
  3. Добавь новое правило, совпадающее с этой страницей.
  4. Вставь код в панель JavaScript правила и сохрани — он запускается при каждом заходе на страницу.

Оцени этот пример

Оценок пока нет — оцени первым.

Этот пример работает?

Сниппеты бесполезны, если их некуда вставить.

JustZix устанавливается за 2 минуты и запускает твой код на каждой подходящей странице. Без аккаунта, без оплаты.

Скачать бесплатно Смотреть применение