fullpage中老师未讲的三个问题
1、如何让导航小圆点横向底部排列？
2、视频中的案例是上下滑动，我想让每个页面左右滑动该怎么实现？
3、怎么改变导航小圆点的样式？
35
收起
正在回答
4回答
同学你好，onSlideLeave方法不是离开时候触发的，而是滑块滚动前触发的，用这个方法就可以：
或者使用afterSlideLoad 方法
适合即可，祝学习愉快！
好帮手慕星星
2021-03-17 19:17:04
同学你好，问题解答如下：
1、可以理解为一页中放了一个类似slide的轮播
2、滚动到最后一个slide时，可以通过判断索引以及滑动方向来设置滚动时间
目前老师使用官网方法无法实现滚动到第几个slide，后续也会继续测试，如果解决了，会立即回复的。
3、左右滚动通过配置参数无法实现无缝滚动
建议：fullPage是一个滚动的插件，并不是全能的，如果想实现左右的滚动，也可以考虑swiper，可能会更简单一些。
祝学习愉快！
好帮手慕星星
2021-03-17 15:15:17
同学你好，老师改了一开始的纯页面的例子，实现了左右滑动，可以参考下，然后自己试着改案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.bootcdn.net/ajax/libs/fullPage.js/3.0.9/fullpage.css" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
}
.section {
text-align: center;
font-weight: bold;
background: red;
}
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/fullPage.js/3.0.9/fullpage.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/fullPage.js/3.0.9/vendors/easings.min.js"></script>
<script>
$(document).ready(function() {
$("#fullpage").fullpage({
// 去掉左右箭头
controlArrows: false,
// 显示slide导航
slidesNavigation: true,
// 导航显示在底部
slidesNavPosition: 'bottom'
});
})
</script>
<title>Document</title>
</head>
<body>
<div id="fullpage">
<!-- 一个section嵌套多个slide -->
<div class="section">
<div class="slide">第一屏</div>
<div class="slide">第二屏</div>
<div class="slide">第三屏</div>
<div class="slide">第四屏</div>
</div>
</div>
</body>
</html>
祝学习愉快！
热门框架Vue开发WebApp 18版
- 参与学习 人
- 提交作业 209 份
- 解答问题 3299 个
本路径是通过ES6基础知识、运用Zepto、Swiper、fullPag等移动端常用工具包、以及当下流行框架Vue，结合多个实战案例，还原真实开发场景，最终实现手机端购物商城网页开发。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星