title: how to add mouse image Scroller in big commerce product gallery?
body: <p>I am trying to scroll product images on mouse hover with javascript but its not working, however, the thumbnail is scrolling but the main image not showing I want to scroll the main image on mouse drag.</p>
  
  <p>here is the website <a href="http://product-slider.mybigcommerce.com/chemex-coffeemaker-3-cup/" rel="nofollow noreferrer">http://product-slider.mybigcommerce.com/chemex-coffeemaker-3-cup/</a>  </p>
  
  <p>Preview code: j42b17p9kb</p>
  
  <p>and here is what-code I have tried so far : </p>
  
  <pre><code>&lt;div class="demo"&gt;
    &lt;ul id="lightSlider"&gt;
  
  
  
        {{#each product.images}}
  
                  &lt;li class="productView-thumbnail"&gt;
                      &lt;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)}}"&gt;
                          &lt;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}}"&gt;
                      &lt;/a&gt;
                       &lt;a href="{{getImage product.main_image 'zoom_size' (cdn theme_settings.default_image_product)}}"&gt;
                      &lt;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&gt;
                  &lt;/a&gt;
                  &lt;/li&gt;
              {{/each}}            
  
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>The original code is here:</strong> </p>
  
  <pre><code>    &lt;section class="productView-images" data-image-gallery&gt;
  &lt;!---large image-----&gt;
              &lt;figure class="productView-image"
                      data-image-gallery-main
                      data-zoom-image="{{getImage product.main_image 'zoom_size' (cdn theme_settings.default_image_product)}}"
                      &gt;
                  &lt;div class="productView-img-container"&gt;
                      &lt;a href="{{getImage product.main_image 'zoom_size' (cdn theme_settings.default_image_product)}}"&gt;
                          &lt;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&gt;
                      &lt;/a&gt;
                  &lt;/div&gt;
              &lt;/figure&gt;
  
  &lt;!---large image end-----&gt;
  &lt;!---thumbnail code------&gt;
              &lt;ul class="productView-thumbnails"{{#gt product.images.length 5}} data-slick='{
                      "infinite": false,
                      "mobileFirst": true,
                      "slidesToShow": 5,
                      "slidesToScroll": 1
                  }'{{/gt}}&gt;
                  {{#each product.images}}
                      &lt;li class="productView-thumbnail"&gt;
                          &lt;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)}}"&gt;
                              &lt;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}}"&gt;
                          &lt;/a&gt;
                      &lt;/li&gt;
                  {{/each}}
              &lt;/ul&gt;
          &lt;/section&gt;
  &lt;!----thumbnail end------&gt;
  </code></pre>
  
  <p>Please Help ...! suggest something</p>
  
  <p>Thanks </p>