Scroll vertically when reaching the last slide when swiping horizontally

[grahamma]

Description

First off: great plugin. Making a pretty cool animated infographic using it.

The following description is included in the codePen as well:

Issue

Using the scrollHorizontally extension and setting continuousScrolling to false has mixed results depending on mobile/desktop and gesture/scroll direction.

Results on mobile (iOS Safari and Chrome)

Left and right gestures - Do not work properly. Slides continuously scroll.

• Swiping right on the first slide returns to the final slide instead of returning to the previous section.
• Swiping left on the final slide returns to the first slide instead of advancing to the next section.

Up and down gestures - Works properly. Slides do not continuously scroll.

• Swiping down on the first slide returns you to the previous section.
• Swiping up on the final slide advances you to the next section.

Results on desktop (macOS Mojave Safari and Chrome)

Mouse wheel up and down - Works properly. Slides do not continuously scroll.

• Mouse wheel up on the first slide returns you to the previous section.
• Mouse wheel down on the final slide advances you to the next section.

Expected behaviour

Left and right swipe gestures on mobile do not continuously scroll when continuousScrolling is set to false and that they advance you to the previous/next sections.

Steps to reproduce it

1. Open the fiddle on desktop - observe results when using the mouse wheel to move between slides. Setting continuousScrolling to false works properly.
2. Open the fiddle on mobile - observe results when swiping left and right and up and down. Swiping left and right does not work and continuously scrolls, yet swiping up and down works properly and does not.

Versions

Desktop: macOS Mojave Safari and Chrome Mobile: iOS Safari and Chrome

[alvarotrigo]

Hi there,

Swiping right on the first slide returns to the final slide instead of returning to the previous section. Swiping left on the final slide returns to the first slide instead of advancing to the next section.

That's the expected behaviour as you are using the default value "loopHorizontal:true". Also, it will never scroll up or down when swiping horizontally unless you make use of the "scrollHorizontally" extension.

Left and right swipe gestures on mobile do not continuously scroll when continuousScrolling is set to false and that they advance you to the previous/next sections.

The expected behaviour is:

• Swipe vertically --> Moves vertically
• Swipe horizontally --> Moves horizontally.

This is only different in the case of using the "Scroll Horizontally" extension where swiping vertically moves the slides horizontally, and when there are no more to swipe horizontally, it goes up or down depending which position the horizontal slide is.

I hope this clarifies it for you :)

[alvarotrigo]

Can you also please remove the Continuous Horizontal extension's code from the codepen to keep it private? I would appreciate you doing so 👍

[grahamma]

@alvarotrigo - Hey thanks for the explanation - setting loopHorizontal to false definitely helps my situation... Must have missed that was an option. Sorry bout that!

My project is a bit like telling a story, with the user going through several sections with several slides one at a time in sequence, so it would be nice, for example, if at the end of a series of slides, continuing to swipe in the same direction would advance them to the next section. My users will have swiped left 6 times in a row in one instance, and not necessarily know when they've reached the last slide and need to change swiping direction.

In the end, I guess what I'm after is some kind of optional "storyModeSwiping" (or something) flag that sets

Swipe vertically --> Moves vertically

Swipe horizontally --> 
if slide = 0 && direction = "left" || slide = lastSlide and direction = "right"
  Move vertically
else
  Move horizontally.

Sounds like that's not an available option though, so I guess I'll just have to indicate that they need to change swiping direction when they reach the last slide.

And yes, I've removed the extension from the codepen. Sorry about that. I just forked off of someone else who had already set that up.

[alvarotrigo]

Sounds like that's not an available option though, so I guess I'll just have to indicate that they need to change swiping direction when they reach the last slide.

Yeah it isn't unfortunately. But I'll consider it for the future as a possible enhancement.

I'll change the title of the topic to fit that description so I can keep it open.

[grahamma]

Thanks a bunch!

[rickysullivan]

Using the React version here. This was a proof of concept to see if it would work for the project I'm working on.

I wanted the same functionality.

Basically I want buttons to control the progress of the sections/slides.

https://codesandbox.io/s/react-fullpagejs-example-nt8vj

Totally feels hacky using window.fullpage_api. I can't seem to position my NavButtons component inside the ReactFullpage component, therefore I can't get access to fullpageApi.

I need to disable moveSectionDown when using the keyboard. I only want right and left arrow keys to work.

[alvarotrigo]

Totally feels hacky using window.fullpage_api.

That's the way to use it. Don't know why you say it looks hacky :)

In any case, I would suggest you to open the issue on the react-fullpage project instead.

[rickysullivan]

Hacky because it's referencing the window namespace when I should be just using the local prop in the render function. I'll look into React's Context to see if there's a way I can pass the API to child functional components.

I will cross-post.

This was purely for the benefit of the OP and I guess to show that there is a need/want for this kind of function. For future possible enhancement ;)

[pgroot91]

Sounds like that's not an available option though, so I guess I'll just have to indicate that they need to change swiping direction when they reach the last slide.

Yeah it isn't unfortunately. But I'll consider it for the future as a possible enhancement.

I'll change the title of the topic to fit that description so I can keep it open.

Sorry for kicking this thread but this is also exactly what i need but the ticket is now closed? Does this mean this feature/addition is now part of the core or some extension @alvarotrigo

[alvarotrigo]

This was purely for the benefit of the OP and I guess to show that there is a need/want for this kind of function. For future possible enhancement ;)

Sure! I'm totally open to new enhancements and pull requests 👍

Sorry for kicking this thread but this is also exactly what i need but the ticket is now closed? Does this mean this feature/addition is now part of the core or some extension @alvarotrigo

It seems I forgot to open the issue again! Thanks for the heads up! I've re-opened it as a possible enhancement!