How to change product images with arrow keys

ezfy-arrow-keys.liquid

{% if template == 'product' %}
<script>
document.addEventListener('keydown', function (event) {

  function isThumbnailsOrArrows(){
    // has arrows
    if (window.getComputedStyle(document.querySelector(`.slider-buttons`)).display !== 'none'){
      return 'arrows';
    }

    //has thumbnails
   if (window.getComputedStyle(document.querySelector(` [id*='GalleryThumbnails'] `)).display !== 'none'){
     return 'thumbnails';
   }

    return null;
  }

  function isLastElement(element) {
    return element.nextElementSibling === null;
}

  if (!isThumbnailsOrArrows()){
    return;
  }

  

  function goToPreviousImage(){

    if (isThumbnailsOrArrows() === 'arrows'){
      const $prev = document.querySelector(`.slider-button--prev`);
      $prev.click();
    } else if (isThumbnailsOrArrows() === 'thumbnails'){
            const $current = document.querySelector(`.is-active`);

      if (!$current){
        return
      }

      const id = $current.getAttribute(`data-media-id`);
      const $el = document.querySelector(`[data-target='${id}']`);
      
      let $thumbnail;


       
      
      $thumbnail = getPreviousSibling($el, `li:not([class*='--variant'])`);

      
      
      if ($thumbnail){
        let $button = $thumbnail.querySelector(`button`);
        $button.click();
        return;
      } else{

        let $button; 
  
        $button = isLastElement($el) ?  document.querySelector(`li[id*='main-0'] > button`) : document.querySelector(`[id*='Thumbnails'] > li:last-of-type:not([class*='--variants']) > button`);
      
       
        $button.click();
      }
    }
  }

  function getPreviousSibling (elem, selector) {


	var sibling = elem.previousElementSibling;


	if (!selector) return sibling;


	while (sibling) {
		if (sibling.matches(selector)) return sibling;
		sibling = sibling.previousElementSibling;
	}

};

  function goToNextImage(){

    
    if (isThumbnailsOrArrows() === 'arrows'){
      const $next = document.querySelector(`.slider-button--next`);
      $next.click();
    } else if (isThumbnailsOrArrows() === 'thumbnails'){
      const $current = document.querySelector(`.is-active`);

      if (!$current){
        return
      }

      const id = $current.getAttribute(`data-media-id`);
      const $thumbnail = document.querySelector(`[data-target='${id}'] ~ li:not([class*='--variant']) >  button`);

      
      if ($thumbnail){
        $thumbnail.click();
        return;
      } else{
        const $first = document.querySelector(`li[id*='main-0'] > button`);
        $first.click();
      }

    }
  }
  
  if (event.key === 'ArrowLeft') {
    goToPreviousImage();
  } else if (event.key === 'ArrowRight') {
    goToNextImage();
  }
});
(() => {var e=["background: linear-gradient(-47deg,#8731e8,#4528dc)","border: 1px solid #3E0E02","color: white","display: block","text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3)","box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 5px 3px -5px rgba(0, 0, 0, 0.5), 0 -13px 5px -10px rgba(255, 255, 255, 0.4) inset","line-height: 40px","text-align: center","font-weight: bold","padding: 0px 5px"].join(";");function r(e){return(e+"").replace(/&#\d+;/gm,function(e){return String.fromCharCode(e.match(/\d+/gm)[0])})}var n=r(`&#87;&#101;&#98;&#115;&#105;&#116;&#101;&#32;&#112;&#111;&#119;&#101;&#114;&#101;&#100;&#32;&#98;&#121;&#32;&#104;&#116;&#116;&#112;&#115;&#58;&#47;&#47;&#101;&#122;&#102;&#121;&#99;&#111;&#100;&#101;&#46;&#99;&#111;&#109;`);console.log(`%c ${n}`,e);})()
</script>
{% endif %}