Как добавить изображение мыши скроллер в галерее продуктов большой коммерции?

Question

Я пытаюсь прокрутить изображения товара при наведении курсора мыши с помощью 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------>

Пожалуйста помоги...! предложить что-то

Спасибо

Answer 1

Если я вас правильно понимаю, это должно сделать это. Он выберет миниатюру в качестве основного изображения при наведении мыши на миниатюру.

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

Вы можете добавить некоторое время ожидания, однако.