вопрос по вертикальной карусели
Вложений: 3
Доброго дня.
Есть галерея как на ВБ. Слева карусель с миниатюрами, справа большое фото (Скриншот 1) При перелистывании стрелками вертикальной карусели миниатюры уходят за границы блока, и можно пролистать, чтобы они вообще ушли вниз или вверх. Пытаюсь на jquery ограничить это движение. Суть в том, что margin-top не должно уходить в минус, чтобы миниатюры не уезжали вниз (Скриншот 2). И так же при пролистывании до самого низу миниатюры не должны уходить вверх (Скриншот 3) кода много, поэтому закинул в фидл: https://jsfiddle.net/tps20/41bgyLh9/6/ Пробовал таким образом, но не помогает: по моей логике: если margin-top уходит в минус, то прекратить выполнять функцию.
if($('#images-additional_wrapper').css("margin-top")<'0px') {
return false;
}
|
tp-20,
...вариант
function down(id, h) {
let margin_top = parseFloat($('#images-additional_wrapper').css('margin-top'));
let max =
parseFloat($('.images-additional').css('height')) -
parseFloat($('#images-additional_wrapper').css('height'));
if (margin_top - h < max) h = margin_top - max;
$('#images-additional_wrapper').animate({
'margin-top': '-=' + h + 'px',
});
}
function up(id, h) {
let margin_top = parseFloat($('#images-additional_wrapper').css('margin-top'));
if (margin_top + h > 0) h = -margin_top;
$('#images-additional_wrapper').animate({
'margin-top': '+=' + h + 'px',
});
}
|
рони, огромное спасибо, идеальное решение! в вашей помощи не сомневался! :thanks:
|
рони, добрый день.
добавил прокрутку мышкой в вертикальную галерею, но перестали работать кнопки вверх/вниз. в стили для класса images-additional_wrapper добавил свойство height: 100%; overflow-y: scroll; Если высоту height: 100% убрать, то кнопки работают, но скроллинг не работает. Возможно ли как-то совместить, чтобы и кнопки и скролл работали? фидл тот же самый: https://jsfiddle.net/tps20/41bgyLh9/6/ заранее спасибо |
tp-20,
решение наверняка есть, но нет возможности помочь. |
| Часовой пояс GMT +3, время: 12:18. |