产品页面的滑动图像

Question

在我的产品页面上，我有一个大图像（主图像），还有3张图像，如果我单击它们，它们会变大。 现在，我添加了2个箭头（图片），当我单击它们时，我想更改我的产品照片（向左或向右），但不更改箭头图片。 我尝试执行此操作，但是当我单击箭头时，大图像变成了我单击的图像...所以不好。如果有人可以帮助我，我将不胜感激。

这是代码。 （带有“ {foreach”的代码块来自prestashop .tpl页面，其中包括更改的小图像）

<ul class="product-images">
        <input id="moveleft" type="image" src="arrowleft.png">
        <input id="moveright" type="image" src="arrowright.png">
      
      {foreach from=$product.images item=image}
        <li id="thumbs"><img class="thumb js-thumb" src="{$image.medium.url}" alt="{$image.legend}" title="{$image.legend}" width="100" itemprop="image"></li>
      {/foreach}
    </ul>

$(document).ready(function() {

    $('#moveleft').click(function() {
        $('#largeImage').attr('src',$(this).attr('src').replace('thumbs','large'));
    $('#description').html($(this).attr('alt'));
    });

    $('#moveright').click(function() {
          $('#largeImage').attr('src',$(this).attr('src').replace('thumbs','large'));
    $('#description').html($(this).attr('alt'));
    });



});