fullpage使用

2019-08-20

fullpage的git地址

首先fullpage 已经更新到3.x版本了,并且从3.x版本摒弃了jQuery的依赖,并且之前多种语言对开发者友好。 但是为了兼容ie8不能使用3.x版本,只能使用2.8.9版本及其以下,虽然2.9.x说兼容ie8但是实际上并没有兼容。因此想要兼容ie8最高版本就是2.8.9(我尝试了一下反正2.9.x不支持)

使用fullpage 要引入fullpage.css, fullpage.js 这些git上都可以找到,cdn链接https://cdnjs.com/libraries/f...

并且2.x版本是依赖jQuery因此必须要引入jQuery

基础的准备好了就可以使用fullpage了

html

<div id="fullpage">
    <div class="section"> // 每一屏使用section的类名
        <div class="slide"></div> // 水平滚动分两屏
        <div class="slide"></div>
    </div>
    <div class="section">
    </div>
    <div class="section">整个视口</div>
    <div class="section fp-auto-height">自动高度</div> // fp-auto-height 加入该类名后这一屏就不会是100%的高度了可以自定义高度,在这个div中加入一个div去控制高度
</div>

fullpage 的水平滚动幻灯片切换的只能通过小圆点或者左右箭头去控制切换,不能实现自动轮播,要想实现自动轮播需要使用其他的插件比如swiper等

js

$(document).ready(function() {
  $('#fullpage').fullpage({
    controlArrows: false, // 确定是否将幻灯片的控制箭头向右或向左移动, 左右箭头
    slidesNavigation: true // 小圆点
  });
});

这里 #fullpage 是最外层包裹的盒子ID 当然如果你所有的属性都用默认的那可以不传递值

$(document).ready(function() {
  $('#fullpage').fullpage();
});

这里就可以跑起来了,实现了一个整平滚动的demo

这里需要注意的是,如果将初始化的js代码写着HTML后面会出现闪动现象

个人见解,仅做参考

原文链接:segmentfault.com

上一篇:学Node必须掌握的Buffer和Stream
下一篇:#react-navigation# 学习重点记录
相关教程
关注微信

扫码加入 JavaScript 社区

相关文章

首次访问,需要验证
微信扫码,关注即可
(仅需验证一次)

欢迎加入 JavaScript 社区

号内回复关键字:

回到顶部