在移动设备fullpage.js上进行垂直滚动

Question

我正在使用fullpage.js插件创建幻灯片。我的幻灯片内容长度在每张幻灯片上都不同。在移动设备上，我的内容溢出并且超出了移动屏幕的高度，该高度要求用户垂直向下滚动以查看溢出的内容。但是，由于网页是为幻灯片设计的，因此无法垂直滚动。我的问题是，如何在内容溢出时使幻灯片垂直滚动而不是水平滚动幻灯片？我使用下面的代码初始化整页。

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

我也使用fp-auto-height-responsive类。

我的HTML页面的基本结构是

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

使用jQuery处理导航

$.fn.fullpage.moveTo('section', $slide);

Answer 1

您可以使用Responsive Slides extension。

详细的on the docs：

  

sensitiveSlides ：（默认为false）fullpage.js的扩展名。设置为true时，触发响应模式时，幻灯片将变成垂直部分。 （通过使用上面详细介绍的响应宽度或响应高度选项）。需要fullpage.js> = 2.8.5。