How to change to next image by clicking and dragging with mouse or finger?

Question

I need a help on a code, on the products page of my site has a featured image and some Thumbs below, when I click on some Thumb the image appears in the highlighted part using addclass removeclass Hide with the code below:

  productImageSwitch: function() {
  if (!this.settings.selectors.$thumbImages.length) {
    return;
  }

  var self = this;

  // Switch the main image with one of the thumbnails
  // Note: this does not change the variant selected, just the image
  self.settings.selectors.$thumbImages.on('click', function(evt) {
    evt.preventDefault();
    var newImageId = $(this).attr('data-image-id');
    self.switchImage(newImageId);
  });
},

switchImage: function (imageId) {
  var $newImage = this.settings.selectors.$productImageWrapper.filter('[data-image-id="' + imageId + '"]');
  var $otherImages = this.settings.selectors.$productImageWrapper.not('[data-image-id="' + imageId + '"]');
  $newImage.removeClass('hide');
  $otherImages.addClass('hide');

  if ($newImage.find('img').attr('data-zoom') && timber.vars.isLargeBp) {
    productImageZoom();
  }
},

how can I move to the next image by clicking and dragging with the mouse or finger on the highlighted image?

Follow the html code that shows the highlighted image

<div class="product-photo-container" id="productPhotoContainer-{{ section.id }}">
     
      {% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}
      {% for image in product.images %}
      {%- include 'image-logic' with width: max_width, height: max_height -%}
      {%- assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

 <div id="{{ img_wrapper_id }}" class="lazyload__image-wrapper{% unless image == featured_image %} hide{% endunless %}" data-image-id="{{ image.id }}" style="max-width: {{ max_width }}px">
    <div class="no-js product__image-wrapper" style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100}}%;">
              
            <img id="{{ img_id }}"
              {% if forloop.first == true %}
              src="{{ featured_image | img_url: '300x300' }}"
              {% endif %}
              class="lazyload no-js lazypreload"
              data-src="{{ img_url }}"
              data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
              data-aspectratio="{{ image.aspect_ratio }}"
              data-sizes="auto"
              alt="{{ image.alt | escape }}">
    </div>          
 </div>
</div>

      {% endfor %}

  {% if product.images.size > 1 %}    
 <ul class="owl-carousel grid-uniform" id="productThumbs-{{ section.id }}">
    {% for image in product.images %}
     <li class="grid-item">
       <a class="product-photo-thumb product-photo-thumb-{{ section.id }}" data-image-id="{{ image.id }}">
         <img src="{{ image.src | img_url: '1024x1024' }}" alt="{{ image.alt | escape }}">
        </a>
      </li>
        {% endfor %}       
  </ul>
    {% endif %}

I’m sending a print just to get an idea of how the above code works in Chrome devtool, realize that there is a div photocontainer where all the images are in Hide and only the one being shown is that there is no class Hide, so I click on some image of Thumb, it is removed from the Hide class and the current one is added to the Hide class, appearing the image I clicked, I would like to do this process of addclass and removeclass just by clicking on the highlighted image and dragging to the side with the mouse or finger without needing to click on the Thumb, it would have to be done?