jQuery/ Галерея CSS / Слайд-шоу Как ограничить прокрутку миниатюр в видимой области

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 событие для каждого изображения в слайдере миниатюр, которое будет изменять основное изображение при нажатии. Это будет сделано следующим образом:

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

Надеюсь это поможет!

Answer 2

Мой ответ оказался в переменных jQuery.

Меняется less_scroll со 100% на 0;

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