Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   вопрос по вертикальной карусели (https://javascript.ru/forum/jquery/86225-vopros-po-vertikalnojj-karuseli.html)

tp-20 21.12.2024 18:34

вопрос по вертикальной карусели
 
Вложений: 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;
    }

рони 21.12.2024 20:14

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',
        });
    }

tp-20 21.12.2024 20:37

рони, огромное спасибо, идеальное решение! в вашей помощи не сомневался! :thanks:

tp-20 29.01.2025 16:09

рони, добрый день.
добавил прокрутку мышкой в вертикальную галерею, но перестали работать кнопки вверх/вниз.
в стили для класса images-additional_wrapper добавил свойство height: 100%; overflow-y: scroll;
Если высоту height: 100% убрать, то кнопки работают, но скроллинг не работает.
Возможно ли как-то совместить, чтобы и кнопки и скролл работали?

фидл тот же самый:
https://jsfiddle.net/tps20/41bgyLh9/6/
заранее спасибо

рони 29.01.2025 17:03

tp-20,
решение наверняка есть, но нет возможности помочь.


Часовой пояс GMT +3, время: 18:54.