Custom navigation buttons to navigate up and down

[hus-o]

I was looking into how plausible it is to make custom nav buttons to navigate to picture above and below the current one.
Closest I've got so far is having extra buttons and running a function which uses a row reference to get the amount of images in row and subtract or add to current index. However issue with this is it doesn't have the smooth animation prev/next have and doesn't go around (infinite).

The rowContainerRef is on react-photo-album component which is above the Lightbox component, but due to verbosity I've removed it.

Wondering what's the best way to approach this, if at all.

const [index, setIndex] = React.useState(-1);
const rowContainerRef = React.useRef<HTMLDivElement>(null);
const lightboxRef = React.useRef<ControllerRef>(null);


  function handleNav(nav: GalleryNav, index: number) {
      const lightboxState = lightboxRef.current?.getLightboxState();
      const globalIndex = lightboxState?.globalIndex ?? 0;
      const rowLength = rowContainerRef.current?.childElementCount ?? 0;

      if (nav === GalleryNav.UP) {
         setIndex(globalIndex - rowLength);
         lightboxRef.current
        } else {
          setIndex(globalIndex + rowLength);
        }
  }

  return (
      <Lightbox
        controller={{ ref: lightboxRef }}
        render={{
          slide: LightboxNextJsImage,
          controls: () => {
            return (
              <CustomButton onClick={() => handleNav(GalleryNav.UP, index)} />
        }}
        ...
       />

[igordanchenko]

The lightbox operates against an array of slides, so it's inherently one-dimensional by design. I do not see an elegant way to smoothly navigate to any other slide except the ones that immediately precede or follow the current slide. There is a way to animate a transition through multiple slides at a time - see prev({ count }), next({ count }) controller ref methods here. But in this case slide animation would scroll through multiple slides instead of jumping to the desired slide immediately.

[igordanchenko]

Sure. You can disable swipe animation with the following setting:

animation={{ swipe: 0 }}

[hus-o]

Thank you man, highly appreciated.
I managed to disable the animation and implement my own nav handling for up/down/left/right buttons but was wondering is it possible to add swiping gesture control for the newly added up/down buttons I've added.

As at the moment the buttons all work as expected however only left/right has touch gesture to swipe as it's built in, so I would like to add same functionality for up/down.

[igordanchenko]

Unfortunately, this library doesn’t have built-in support for vertical swipe gesture.

[hus-o]

Hi, I've noticed even with swipe and nav animations to 0, there is a calculated style called "--yarl__swipe_offset" on the image container, and I'm unsure how to prevent this. when using keys and nav buttons the picture jumps from one to other but using touch/pointer I can do like a 'half swipe' whereas there should be no offset, after a certain threshold it should switch to next image.

[igordanchenko]

While there is no setting to disable swipe offset, you can achieve the desired behavior with the following css:

.yarl__carousel {
    transform: none;
}

Here is another alternative solution I can think of:

• provide slides array with a single element
• disable wrap-around carousel with carousel={{ finite: true }}
• remove the default navigation buttons with render={{ buttonPrev: () => null, buttonNext: () => null }}
• implement custom left / right / up / down navigation buttons
• change the slides array only element accordingly on navigation buttons click