整页水平滑块

Question

我正在使用 fullpage.js 和 bootsrap。我的部分有自动高度，因为水平滑块有问题，它不会显示任何 text.Here 是代码：

<div class="section fp-auto-height">
        <div class="container">
            <div class="row">
                <div class="heading">header text</div>
                <div class="slide" id="slide1">Horizontal slider1</div>
                <div class="slide" id="slide2">Horizontal slider2</div>
            </div>
      </div>
</div>

知道为什么它不起作用吗？

Answer 1

您是否阅读了有关 required HTML structure 的 fullpage.js 文档？

幻灯片的结构应如下所示：

<div class="section">
    <div class="slide"> Slide 1 </div>
    <div class="slide"> Slide 2 </div>
    <div class="slide"> Slide 3 </div>
    <div class="slide"> Slide 4 </div>
</div>

所以...

删除您的 row 元素
删除您的 heading 元素。
删除您的 container 元素。
水平滑块1 水平滑块 2

如果您希望在该特定部分的所有幻灯片中使用 header，则必须使用 position:absolute 和部分 position:relative:

<div class="section fp-auto-height">
    <div class="header">Demo</div>
    <div class="slide" id="slide1">Horizontal slider1</div>
    <div class="slide" id="slide2">Horizontal slider2</div>
</div>

Css

.header{
    position:absolute;
    top: 0;
}
.section {
    position:relative;
}

Reproduction online

整页水平滑块

fullpage horizontal slider

twitter-bootstrap

fullpage.js