jQuery/CSS Gallery/Slideshow如何将缩略图滚动限制在可见区域

好的，有一个画廊幻灯片功能，其中选定缩略图的img源将显示在主图像容器中

我想我能把那部分做好。我现在的问题是试图定义缩略图滚动区域-我希望它显示缩略图，而不是空白

以下是jQuery：

function thumbs_slide(){
            var more_thumbs = jQuery('.more-thumbs');
            var less_thumbs = jQuery('.less-thumbs');
            var thumbnails = jQuery('.thumb-outer-container .thumbnails');
            var more_scroll = '-100%';
            var less_scroll = '100%';
            var out_scroll = thumbnails.css('top');

            more_thumbs.hover(function(){
                thumbnails.css('top',more_scroll)
            },function(){
                out_scroll = thumbnails.css('top');
                thumbnails.css('top',out_scroll);                   
            })

            less_thumbs.hover(function(){
                thumbnails.css('top',less_scroll);
            },function(){
                out_scroll = thumbnails.css('top');
                thumbnails.css('top',out_scroll);
            })
        }

        thumbs_slide();

CSS:

这是一个WP站点，如果需要，我可以添加更多代码，但我相信这是我的jQuery所需要的

示例链接：->gallery选项卡

谢谢，

---

Matt

解决此问题的一种方法是将

单击事件绑定到缩略图滑块中的每个图像，当单击时，该事件将更改主图像。这将类似于以下步骤：

$('.thumbnails a img').click(function() {
  $(".woocommerce-main-image").attr("src", this.attr("src"));
});

希望这有帮助
 我的答案最终出现在jQuery变量中

将less_滚动从“100%”更改为“0”

    var more_scroll = '-100%';
    var less_scroll = '0';

    var more_scroll = '-100%';
    var less_scroll = '0';