https://github.com/lipten/slidepage
简单、跨平台、无依赖的全屏滚动H5插件，可实现内容超出屏幕滚动、动态更新等特色功能
https://github.com/lipten/slidepage
fullpage h5 slide-page slider
Last synced: 6 months ago
JSON representation
简单、跨平台、无依赖的全屏滚动H5插件，可实现内容超出屏幕滚动、动态更新等特色功能
- Host: GitHub
- URL: https://github.com/lipten/slidepage
- Owner: lipten
- License: mit
- Created: 2015-10-01T11:10:08.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2023-05-26T08:37:45.000Z (over 2 years ago)
- Last Synced: 2025-04-01T11:50:24.324Z (6 months ago)
- Topics: fullpage, h5, slide-page, slider
- Language: JavaScript
- Homepage: http://lipten.github.io/slidePage/
- Size: 6.36 MB
- Stars: 315
- Watchers: 14
- Forks: 70
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# slidePage
### Demo:
* [simple](http://slidepage.codeasily.net/examples/simple.html)
* [animated](http://slidepage.codeasily.net/examples/animated.html)
* [scroll](http://slidepage.codeasily.net/examples/scroll.html)
* [custom](http://slidepage.codeasily.net/examples/custom.html)
* [dragMode](http://slidepage.codeasily.net/examples/drag.html)
* [fullFeatured](http://slidepage.codeasily.net/examples/fullFeatured.html)
### Featured
slidePage3 特别适合主流前端框架开发，无任何依赖库，Gzip压缩后仅有2.4k, 接口符合插件具有的初始化、销毁、重载的方法，适配PC和移动端，可实现内容超出屏幕滚动、手动播放动画、动态更新等特色功能，具体查看完整示例: [fullFeatured](http://slidepage.codeasily.net/examples/fullFeatured.html)
### Documentation:
* [Usage](#usage)
* [Install slidePage](#install-slidepage)
* [Including files](#including-files)
* [Required HTML structure](#required-html-structure)
* [Initialization](#initialization)
* [Configuration](#configuration)
* [Options](#options)
* [Using Animation](#using-animation)
* [Methods](#methods)
* [slidepage.slideNext()](#slidepageslidenext)
* [slidepage.slidePrev()](#slidepageslideprev)
* [slidepage.slideTo(page)](#slidepageslidetopage)
* [slidepage.slideFile(page)](#slidepageslidefilepage)
* [slidepage.destroy()](#slidepagedestroy)
* [slidepage.update()](#slidepageupdate)
* [Troubleshooting(常见问题汇总)](https://github.com/lipten/slidePage/wiki/%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98%E6%B1%87%E6%80%BB)
## Usage
### Including files
```
```
### Required HTML structure
```
```
您可以查看完整examples里的html文件结构 [fullFeatured.html](https://github.com/lipten/slidePage/blob/master/examples/fullFeatured.html)
### Initialization
```
new slidePage()
```
## Configuration
```
var slidepage = new slidePage({
slideContainer: '#slide-container',
slidePages: '.slide-item',
page: 1,
refresh: true,
dragMode: false,
useWheel: true,
useSwipe: true,
useAnimation : true,
// Events
before: function(origin,direction,target){},
after: function(origin,direction,target){},
});
```
## Options
> 在slidePage中，page指的是每一次全屏滚动的一屏，也可以理解为每一屏对应的页码，必须是1以上的整数
name
type
default
description
slideContainer
String|Element
'.slide-container'
指定slidePage要运行的容器选择器或元素
slidePages
String|NodeList|HTMLCollection
'.slide-page'
指定`slideContainer`容器里每个page的选择器或元素
page
Number
1
首次进入的page页码
dragMode
Boolean
false
💡移动端开启触控拖动滑屏模式(此功能还在测试阶段)，默认为false，前提是`useSwipe: true`
useAnimation
Boolean
true
是否开启动画
refresh
Boolean
true
每次滚动进入是否重新执行动画
useWheel
Boolean
true
是否开启鼠标滚轮滑动
useSwipe
Boolean
true
是否开启移动端触控滑动
## Events
name
description
before
每次全屏滚动前触发事件，回调三个参数(origin, direction, target)，分别是滚动前的page序号、方向('next'|'prev')、滚动后的page序号
after
每次全屏滚动后触发事件，回调三个参数(origin, direction, target)，参数释义同上
## Using Animation
> 为了方便示例用animate.css，动画效果可以自己实现
### Include animate.css
```
```
### HTML structure
```
;
```
在想要动画控制的元素上加上step类，并加上css动画类名即可使用动画，data-delay属性控制动画延时播放(默认为100毫秒);
#### 手动触发动画
```
```
1. 在想要手动播放动画的元素上加上lazy类，并加上css动画类名即可使用动画，可以加上data-delay使触发时再延时播放;
2. 通过slidepage.slideFire(page)指定某一页的lazy动画触发播放。
## Drag Mode
> 最新加入的拖动滑屏模式，在实例化时传入配置`dragMode: true`，即可开启，此功能目前为测试阶段，请酌情使用。
现已加入Demo系列豪华套餐：
* [dragMode](http://slidepage.codeasily.net/examples/drag.html)
需要注意的是，为了滑动松手后的动画体验更好，记得在你的项目里设置过渡动画类`.slide-container .slide-page.transition`，调整过渡函数和时长。具体查看示例代码：https://github.com/lipten/slidePage/blob/master/examples/drag.html#L13
## Methods
### slidepage.slideNext()
滑动定位到下一屏
### slidepage.slidePrev()
滑动定位到上一屏
### slidepage.slideTo(page)
传入page页码，滑动定位到对应的page
### slidepage.slideFire(page)
触发对应 page 的lazy手动动画
### slidepage.destroy()
销毁当前实例，移除所有事件恢复class属性值。
### slidepage.update(newSlidePages)
当html里的page发生变化时需要执行动态更新。
`newSlidePages`参数非必填，仅应对于初始化的时候`slidePages`参数传入的是`NodeList`或`HTMLCollection`时才需要在更新的时候再传一次变化后的DOM结构通知更新。
> 此方法非常适合现在流行的数据驱动型框架，当模型数据驱动改变pege的排列时，执行update可以起到更新的作用，可以先看示例源码了解：[custom.html](https://github.com/lipten/slidePage/blob/master/examples/custom.html)
## Contributing
### development
本地运行
```
npm install
npm run server
```
构建
```
npm run build
```