Javascript 如何在大商业产品库中添加鼠标图像滚动条？

我试图用javascript在鼠标悬停时滚动产品图像，但它不起作用，然而，缩略图正在滚动，但主图像未显示我想在鼠标拖动时滚动主图像

这是网站

预览代码：j42b17p9kb

以下是我迄今为止尝试过的代码：

<div class="demo">
  <ul id="lightSlider">



      {{#each product.images}}

                <li class="productView-thumbnail">
                    <a
                        class="productView-thumbnail-link"
                        href="{{getImage this 'product_size' (cdn ../theme_settings.default_image_product)}}"
                        data-image-gallery-item
                        data-image-gallery-new-image-url="{{getImage this 'product_size' (cdn ../theme_settings.default_image_product)}}"
                        data-image-gallery-zoom-image-url="{{getImage this 'zoom_size' (cdn ../theme_settings.default_image_product)}}">
                        <img class="lazyload" data-sizes="auto" src="{{cdn 'img/loading.svg'}}" data-src="{{getImage this 'productview_thumb_size' (cdn ../theme_settings.default_image_product)}}" alt="{{this.alt}}" title="{{this.alt}}">
                    </a>
                     <a href="{{getImage product.main_image 'zoom_size' (cdn theme_settings.default_image_product)}}">
                    <img class="productView-image--default lazyload" 
                         data-sizes="auto" 
                         src="{{cdn 'img/loading.svg'}}" 
                         data-src="{{getImage product.main_image 'product_size' (cdn theme_settings.default_image_product)}}"
                         alt="{{product.main_image.alt}}" title="{{product.main_image.alt}}" data-main-image>
                </a>
                </li>
            {{/each}}            

  </ul>
</div>

{{{#每个产品.图片}


{{/每个}}

原始代码在这里：

    <section class="productView-images" data-image-gallery>
<!---large image----->
            <figure class="productView-image"
                    data-image-gallery-main
                    data-zoom-image="{{getImage product.main_image 'zoom_size' (cdn theme_settings.default_image_product)}}"
                    >
                <div class="productView-img-container">
                    <a href="{{getImage product.main_image 'zoom_size' (cdn theme_settings.default_image_product)}}">
                        <img class="productView-image--default lazyload" 
                             data-sizes="auto" 
                             src="{{cdn 'img/loading.svg'}}" 
                             data-src="{{getImage product.main_image 'product_size' (cdn theme_settings.default_image_product)}}"
                             alt="{{product.main_image.alt}}" title="{{product.main_image.alt}}" data-main-image>
                    </a>
                </div>
            </figure>

<!---large image end----->
<!---thumbnail code------>
            <ul class="productView-thumbnails"{{#gt product.images.length 5}} data-slick='{
                    "infinite": false,
                    "mobileFirst": true,
                    "slidesToShow": 5,
                    "slidesToScroll": 1
                }'{{/gt}}>
                {{#each product.images}}
                    <li class="productView-thumbnail">
                        <a
                            class="productView-thumbnail-link"
                            href="{{getImage this 'product_size' (cdn ../theme_settings.default_image_product)}}"
                            data-image-gallery-item
                            data-image-gallery-new-image-url="{{getImage this 'product_size' (cdn ../theme_settings.default_image_product)}}"
                            data-image-gallery-zoom-image-url="{{getImage this 'zoom_size' (cdn ../theme_settings.default_image_product)}}">
                            <img class="lazyload" data-sizes="auto" src="{{cdn 'img/loading.svg'}}" data-src="{{getImage this 'productview_thumb_size' (cdn ../theme_settings.default_image_product)}}" alt="{{this.alt}}" title="{{this.alt}}">
                        </a>
                    </li>
                {{/each}}
            </ul>
        </section>
<!----thumbnail end------>

{{{#每个产品.图片}


{{/每个}}

请帮忙。。。！建议

---

谢谢

如果我理解正确，这应该可以。它将选择缩略图作为鼠标移动到缩略图上的主图像

$（'img.lazyautosizes'）.bind（'mouseover'，function（）{
$（this.trigger（'click'）；
log（“缩略图单击鼠标悬停”）；
});