默认情况下,会写入fullpage.js的任何示例,以便在屏幕的最大高度和宽度(全屏幕)下渲染幻灯片.

但是,我试图在我的html页面中将幻灯片包含在一个固定大小的div中.我有一个固定高度和固定宽度的div,并希望fullpage.js幻灯片在该div内播放.我试过但是我无法将高度降低到规定的固定高度.固定宽度工作正常.

    

        

            
Responsive
            
This example will turn to normal scroll when the window size gets smaller than 600px height
        
    
    

        

            

                
Ideal for small screens
            
        
        

            
This example uses responsiveHeight: 600
        
    
    

        

            
Keep it simple!
        
    

Irvin Domini.. 5

如前所述这里:

这是一个FULL PAGE插件.没有这样的选择.

但是可以通过CSS破解它.

码:

$('#fullpage').fullpage({
    sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'],
    anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage', 'lastPage'],
    css3: true,
    verticalCentered:false
});

CSS:

#section0, #section1, #section2 {
    height: auto !important;
}

不要忘记verticalCentered: false选项.你还需要覆盖另一个包装器fp-table

演示:http://jsfiddle.net/IrvinDominin/o46332j6/

更新

前段时间,fullpage.js包含了一个使用fp-auto-height类创建更小或更大部分的选项.

参考:https://github.com/alvarotrigo/fullPage.js#creating-smaller-sections

演示:http://jsfiddle.net/IrvinDominin/o46332j6/2/

如前所述这里:

这是一个FULL PAGE插件.没有这样的选择.

但是可以通过CSS破解它.

码:

$('#fullpage').fullpage({
    sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'],
    anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage', 'lastPage'],
    css3: true,
    verticalCentered:false
});

CSS:

#section0, #section1, #section2 {
    height: auto !important;
}

不要忘记verticalCentered: false选项.你还需要覆盖另一个包装器fp-table

演示:http://jsfiddle.net/IrvinDominin/o46332j6/

更新

前段时间,fullpage.js包含了一个使用fp-auto-height类创建更小或更大部分的选项.

参考:https://github.com/alvarotrigo/fullPage.js#creating-smaller-sections

演示:http://jsfiddle.net/IrvinDominin/o46332j6/2/