Как добавить товары в Бруклине, чтобы превратить товары в миниатюры предметов, чтобы добавить ползунок стрелки?

Question

Я хотел бы добавить ползунок со стрелкой для настольной версии магазина Shopify в стиле Бруклина, миниатюру изображения товара, и теперь я закончил создание стиля CSS, но не JS, пожалуйста, теплые друзья, скажите мне, как изменить код JS? Большое спасибо!

Это мой URL: URL

theme.js.liquid

showVariantImage: function(evt) {
  var variant = evt.variant;
  var $newImage = $(
    '.product-single__photo[data-image-id="' +
      variant.featured_image.id +
      '"]'
  );
  var imageIndex;

  if (variant && variant.featured_image) {
    this.setActiveThumbnail(variant.featured_image.id);
  }

  if (theme.variables.bpSmall) {
    // Switch carousel slide, unless it's the first photo on load
    imageIndex = $newImage.closest('.slick-slide').attr('index');
    // Navigate to slide unless it's the first photo on load
    // If there is no index, slider is not initalized.
    if (_.isUndefined(imageIndex)) {
      return;
    }

    if (imageIndex !== 0 || theme.variables.productPageLoad) {
      $(this.selectors.productImages, this.$container).slickGoTo(
        imageIndex
      );
    }
    // Switch image variant on thumbnail layout for desktop view;
    // When a image variant is updated on mobile view, update the
    // desktop view also.
    if (!this.$container.data('scroll-to-image')) {
      this.switchImage(variant.featured_image.id);
    }
  } else {
    if (this.$container.data('scroll-to-image')) {
      imageIndex = $newImage.closest('.slick-slide').index();
      // Scroll to/reorder image unless it's the first photo on load
      if (imageIndex !== 0 || theme.variables.productPageLoad) {
        if (theme.variables.productPageSticky) {
          // Scroll to variant image
          $('html, body').animate(
            {
              scrollTop: $newImage.offset().top
            },
            250
          );
        } else {
          // Move selected variant image to top, preventing scrolling
          var currentScroll = $(document).scrollTop();
          $newImage
            .closest(
              $(
                this.selectors.productImagePhotoFlexWrapper,
                this.$container
              )
            )
            .prependTo($(this.selectors.productImages, this.$container));
          $(document).scrollTop(currentScroll);
        }
      }
    } else {
      // Thumbnail layout
      // Move selected variant image to top
      $newImage
        .closest(
          $(this.selectors.productImagePhotoFlexWrapper, this.$container)
        )
        .prependTo($(this.selectors.productImages, this.$container));
      // Switch image variant for thumnail layout
      this.switchImage(variant.featured_image.id);
    }
  }

  if (!theme.variables.productPageLoad) {
    theme.variables.productPageLoad = true;
  }
},

switchImage: function(imageId) {
  $(this.selectors.productImagePhotoContainer, this.$container).addClass(
    'hide'
  );
  $(this.selectors.productImagePhotoContainer, this.$container)
    .filter('#ProductImageWrapper-' + imageId)
    .removeClass('hide');
},

reorderImages: function() {
  if (this.$container.data('scroll-to-image')) return;
  var $newImage = $(
    this.selectors.productImagePhotoContainer,
    this.$container
  ).not('.hide');
  $newImage
    .closest(
      $(this.selectors.productImagePhotoFlexWrapper, this.$container)
    )
    .prependTo($(this.selectors.productImages, this.$container));
},

productThumbnailSwitch: function() {
  var self = this;
  var $productThumbnails = $('#ProductThumbs', this.$container).find(
    this.selectors.productThumbnail
  );

  if ($productThumbnails.length) {
    // Switch the main image with one of the thumbnails
    // Note: this does not change the variant selected, just the image
    $productThumbnails.on('click', function(evt) {
      evt.preventDefault();
      var newImageId = $(this).attr('data-image-id');
      var $newImage = $(
        '.product-single__photo[data-image-id="' + newImageId + '"]'
      );

      self.switchImage(newImageId);
      self.setActiveThumbnail(newImageId);

      // Thumbnail layout
      // Move selected featured image to top
      $newImage
        .closest(
          $(self.selectors.productImagePhotoFlexWrapper, self.$container)
        )
        .prependTo($(self.selectors.productImages, self.$container));
    });
  }
},

setActiveThumbnail: function(imageId) {
  var $productThumbnails = $('#ProductThumbs', this.$container).find(
    this.selectors.productThumbnail
  );

  if ($productThumbnails.length) {
    var activeClass = 'active-thumb';
    var $thumbnail = $(
      this.selectors.productThumbnail + "[data-image-id='" + imageId + "']",
      this.$container
    );

    $productThumbnails.removeClass(activeClass);
    $thumbnail.addClass(activeClass);
  }
},

productImageZoom: function() {
  if (
    !$(this.selectors.productImagePhoto, this.$container).length ||
    theme.variables.bpSmall
  ) {
    return;
  }

  $(this.selectors.productImagePhoto, this.$container).magnificPopup({
    type: 'image',
    mainClass: 'mfp-fade',
    closeOnBgClick: true,
    closeBtnInside: false,
    closeOnContentClick: true,
    tClose: theme.strings.zoomClose,
    removalDelay: 500,
    gallery: {
      enabled: true,
      navigateByImgClick: false,
      arrowMarkup:
        '<button title="%title%" type="button" class="mfp-arrow mfp-arrow-%dir%"><span class="mfp-chevron mfp-chevron-%dir%"></span></button>',
      tPrev: theme.strings.zoomPrev,
      tNext: theme.strings.zoomNext
    }
  });
},