← All examples

JavaScript Productivity aliexpress.com

AliExpress: gallery navigation with arrow keys

Lets you switch product gallery photos with the left and right arrow keys, no mouse needed.

Code to copy

// Browse the product image gallery with the left and right arrow keys
document.addEventListener('keydown', function (e) {
  if (e.target && /^(INPUT|TEXTAREA|SELECT)$/.test(e.target.tagName)) { return; }
  if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight') { return; }
  const thumbs = document.querySelectorAll('[class*="thumbnail"] [class*="item"], [class*="slider--item"]');
  if (!thumbs.length) { return; }
  let idx = -1;
  thumbs.forEach(function (t, i) {
    if (t.className.indexOf('active') !== -1) { idx = i; }
  });
  let next = e.key === 'ArrowRight' ? idx + 1 : idx - 1;
  if (next < 0) { next = thumbs.length - 1; }
  if (next >= thumbs.length) { next = 0; }
  thumbs[next].dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
  thumbs[next].click();
});

How to use this example

  1. Copy the code with the button above.
  2. Install JustZix (2 minutes) and open the extension on the target page.
  3. Add a new rule matching that page.
  4. Paste the code into the rule's JavaScript panel and save — it runs on every page visit.

Rate this example

No ratings yet — be the first.

Does this example work?

Snippets are useless without somewhere to paste them.

JustZix takes 2 minutes to install and runs your code on every matching page. No account, no payment.

Download free See use cases