4

I am creating slides using fullpage.js plugin. My slide content length is different on each slide. On a mobile device, my content overflows and goes beyond the height of mobile screen which requires user to scroll vertically down to view overflown content. However, I cannot scroll vertically since my webpage is designed for slides. My question is, how can I make slide scroll vertically when the content is overflown instead of scrolling through slides (horizontally)? I use below code to initialize fullpage.

$('#main').fullpage({
  lockAnchors: true,
  anchors: ['section'],
  loopHorizontal: false,
  controlArrows: false
});

I also use fp-auto-height-responsive class.

Basic structure of my HTML page is

<div class="container-fluid section fp-auto-height-responsive">
  <div class="smooth-scroll smooth-scroll-top slide paralax" data-anchor="idOfNextSlide">
    Some Content
  </div>
</div>

Navigation is handled using jQuery

$.fn.fullpage.moveTo('section', $slide);
Roy Scheffers
  • 3,832
  • 11
  • 31
  • 36
Pirate
  • 1,167
  • 1
  • 9
  • 19
  • I think this is what you are looking for. [jquery.fullPage.js how to enable scroll within a div without affecting the sections scroll](https://stackoverflow.com/questions/22381587/jquery-fullpage-js-how-to-enable-scroll-within-a-div-without-affecting-the-secti) – Roy Scheffers Aug 07 '18 at 06:46
  • this is exactly what I want, thanks!! – Pirate Aug 08 '18 at 15:57

1 Answers1

1

You can make use of the Responsive Slides extension.

As detailed on the docs:

responsiveSlides: (default false) Extension of fullpage.js. When set to true slides will be turned into vertical sections when responsive mode is fired. (by using the responsiveWidth or responsiveHeight options detailed above). Requires fullpage.js >= 2.8.5.

Alvaro
  • 40,778
  • 30
  • 164
  • 336
  • I don't want to convert slides into vertical section. On any resolution, I want to keep the horizontal slides. Basically, I have 9 images within a div tag which occupies full width when viewing on a smaller device. My requirement is, when the images overflows, I want to scroll within a div tag, select an image and navigate to next slide. But when I try to scroll down, page doesn't move at all. Probably, as @RoyScheffers suggested, I need normalScrollElements to scroll within a div tag while keeping the horizontal slides unaffected. – Pirate Aug 08 '18 at 16:03
  • Due to professional constraint, I cannot post code or give a link to our project. – Pirate Aug 08 '18 at 16:04
  • Use the scrollOverflow option as [in this example](https://alvarotrigo.com/fullPage/examples/scrolling.html). – Alvaro Aug 08 '18 at 20:27
  • Awesome! This is the same thing I want to achieve. Thanks a ton. Cheers. – Pirate Aug 08 '18 at 23:28