时间戳

首页 > 解决方案 > 如何在大型商业产品库中添加鼠标图像滚动器？

javascript - 如何在大型商业产品库中添加鼠标图像滚动器？

问题描述

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

这是网站http://product-slider.mybigcommerce.com/chemex-coffeemaker-3-cup/

预览代码：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------>

请帮忙 ...！提出一些建议

谢谢

标签： javascriptbigcommercestencils

解决方案

如果我理解正确，应该这样做。鼠标悬停在缩略图上时，它将选择缩略图作为主图像。

$('img.lazyautosizes').bind('mouseover', function(){ 
    $(this).trigger('click'); 
    console.log('thumbnail clicked on hover');
});

但是，您可能想要添加一些超时。

推荐阅读