CODEWITHSUNDEEP
javascripthtmlcssfullpage.js
Pirate
Pirate

Reputation: 1175

Vertical scrolling on mobile device fullpage.js

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);

Upvotes: 4

Views: 3438

Answers (1)

Alvaro
Alvaro

Reputation: 41595

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.

Upvotes: 1

Related Questions