2

I am using fullPage.js for a one pager website. It works beautifully. It has support for scrolling through full page slides at the flick of the scroll wheel, and each slide can also contain a horizontal slideshow, normally triggered at that point by clicking one of the side arrows.

I want to force the user to scroll through that slideshow before they can progress down to the next slide. Does anyone know of a way to allow the slideshow to be triggered with the mouse wheel when scrolling down? Then when it hits the end of that slideshow it scrolls vertical again to the next slide?

Robert E
  • 700
  • 3
  • 16
  • 29
  • There is a working solution here in case anyone wants to accomplish this. https://stackoverflow.com/questions/32920251/fullpage-js-slide-horizontal-on-scroll – lowtechsun Mar 25 '16 at 16:34

2 Answers2

0

Update 2016

Now fullPage.js provides the Scroll Horizontally extension for it.

What you want to accomplish is not that simple to implement in the plugin. Also, I would say forcing the user to follow a path is not consider as a good practice from the user experience point of view.

Also, what should happen once the user reach the next section and then scrolls up? Should he follow all the way back throw the slides of the previous section again in order to keep moving up ?

Anyway, if you want to accomplish it by your own, you would need first of all, to avoid the auto scrolling behavior when scrolling withing your slides (or the section slides for which you want to apply this).

And then, you would need to change the scrolling behavior to trigger the action to go to the next or to the previous slide by triggering the control arrows events depending on the scrolling direction.

Once the end of the slider is reached, you would need to add again the auto scrolling even.

It really doesn't sound simple if you want to do it by your own. You would need to recode the plugin.

Alvaro
  • 40,778
  • 30
  • 164
  • 336
0

You can do it with jquery.mousewheel like:

$('#fullpage').on('mousewheel', function(event) {
       if (event.deltaY > 0){$.fn.fullpage.moveSlideRight();}
       else{$.fn.fullpage.moveSlideLeft();}
});

https://github.com/jquery/jquery-mousewheel

Kim Nielsen
  • 9
  • 1