0

I have a problem with the scroll of the gallery's navigation on mobile. On mobile, I put to also have thumbnails

<var name="breakpoints">
            <var name="mobile">
                <var name="conditions">
                    <var name="max-width">767px</var>
                </var>
                <var name="options">
                    <var name="options">
                        <var name="nav">thumbs</var>
                        <var name="navdir">horizontal</var>
                    </var>
                </var>
            </var>
        </var>

The problem is that when I scroll in the nav, the scroll is not smoothly at all and it scroll only around 20-30px. Does anyone have a solution to this? Thank you!

1 Answer 1

0

I made something that look like this: On line 1775(for me), in fotorama.js, we got jQuery.Fotorama = function ($fotorama, opts) and there we have navShaftTouchTail = moveOnTouch, inside onEnd function in the else if (result.pos !== result.newPos) I added: const pos = result.newPos < result.pos ? result.newPos - 75 : result.newPos + 75; and I changed slide function parameters like this

slide($navShaft, {
                        time: result.time,
                        pos: pos,
                        overPos: result.overPos,
                        direction: opts.navdir,
                        onEnd: onEnd
                    });

The final result looks like:

onEnd: function (result) {

                function onEnd() {
                    slideNavShaft.l = result.newPos;
                    releaseAutoplay();
                    changeAutoplay();
                    thumbsDraw(result.newPos, true);
                    thumbArrUpdate();
                }

                if (!result.moved) {
                    var target = result.$target.closest('.' + navFrameClass, $navShaft)[0];
                    target && onNavFrameClick.call(target, result.startEvent);
                } else if (result.pos !== result.newPos) {
                    pausedAutoplayFLAG = true;
                    const pos = result.newPos < result.pos ? result.newPos - 75 : result.newPos + 75;
                    slide($navShaft, {
                        time: result.time,
                        pos: pos,
                        overPos: result.overPos,
                        direction: opts.navdir,
                        onEnd: onEnd
                    });
                    thumbsDraw(result.newPos);
                    o_shadows && setShadow($nav, findShadowEdge(result.newPos, navShaftTouchTail.min, navShaftTouchTail.max, result.dir));
                } else {
                    onEnd();
                }
            },

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.