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

Question

好的，有一个画廊幻灯片放映功能，所选缩略图的 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:

.single-product .load .images .thumb-outer-container {
float: right;
width: 20%;
max-width: 200px;
overflow: hidden;
position: relative;
border: 1px solid #d1d1d1;


.thumb-outer-container .thumbnails {
-moz-transition: all 5s ease-in-out;
-ms-transition: all 5s ease-in-out;
-o-transition: all 5s ease-in-out;
-webkit-transition: all 5s ease-in-out;
transition: all 5s ease-in-out;
}

.thumb-outer-container .more-thumbs,
 .thumb-outer-container .less-thumbs {
opacity: .85;
position: absolute;
z-index: 99;
right: 0;
left: 0;
height: 50%;

text-align: center;
cursor: pointer;

-moz-transition: all .05s ease-in-out;
-ms-transition: all .05s ease-in-out;
-o-transition: all .05s ease-in-out;
-webkit-transition: all .05s ease-in-out;
transition: all .05s ease-in-out;
}

.more-thumbs {
top: 0;
}

.more-thumbs::after {
    content: '\f077';
    font-family: FontAwesome;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    border-bottom: 1px solid currentColor;
    background-color: rgba(249,249,249,.95);
    color: rgba(0,174,239,1);
}

.less-thumbs {
bottom: 0;
}

.less-thumbs::after {
    content: '\f078';
    font-family: FontAwesome;
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    border-top: 1px solid currentColor;
    background-color: rgba(249,249,249,.95);
    color: rgba(0,174,239,1);
}

.thumb-outer-container .more-thumbs:hover,
.thumb-outer-container .more-thumbs:focus,
.thumb-outer-container .less-thumbs:hover,
.thumb-outer-container .less-thumbs:focus {
    opacity: 1 !important;
}

.single-product .load .images img {
border: 0;
}

.single-product .load .images .thumbnails {
padding-top: 0 !important;
position: absolute;
top: 0;
right: 0;
left: 0;
}

.single-product .load .images .thumbnails a {
margin: 0 0 1px !important;
padding: 0 !important;
border: 0;
float: left !important;
display: inline-block !important;
width: 100% !important;
max-width: 200px !important;
}

.single-product .load .images .thumbnails a:hover,
.single-product .load .images .thumbnails a:focus {
    border-bottom: 0;
}

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

示例链接:http://www.dev.mediaworksweb.com/beamimaging-wp/product/phosphor-screens/ -> 图库选项卡

谢谢， 马特

Answer 1

解决此问题的一种方法是将 click 事件绑定(bind)到缩略图 slider 中的每个图像，单击时会更改主图像。这将类似于以下内容完成:

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

希望这对您有所帮助!