Question

我在bootsrap中使用 fullpage.js 。我的部分有自动高度，因为水平滑块有些错误，它不会显示任何文字。这是代码：

<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

如果您想在该特定部分中为所有幻灯片添加标题，则必须使用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

全页水平滑块

1 个答案: