https://github.com/mc-zone/zepto.pageslider
A Zepto JS plugin that creates the various slider modules. 基于Zepto的移动端多功能滚动模块插件
https://github.com/mc-zone/zepto.pageslider
Last synced: about 1 year ago
JSON representation
A Zepto JS plugin that creates the various slider modules. 基于Zepto的移动端多功能滚动模块插件
- Host: GitHub
- URL: https://github.com/mc-zone/zepto.pageslider
- Owner: mc-zone
- License: mit
- Created: 2015-02-14T08:46:36.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2017-04-23T13:54:52.000Z (over 9 years ago)
- Last Synced: 2025-04-08T13:49:55.962Z (over 1 year ago)
- Language: JavaScript
- Homepage: http://mc-zone.github.io/Zepto.pageSlider
- Size: 83 KB
- Stars: 5
- Watchers: 2
- Forks: 6
- Open Issues: 0
-
Metadata Files:
- Readme: README.en.md
- License: LICENSE
Awesome Lists containing this project
README
#Zepto.pageSlider
基于Zepto的移动端多功能滚动模块插件
A Zepto JS plugin that creates the various slider modules.
[Readme for Chinese](https://github.com/mc-zone/Zepto.pageSlider/tree/master/README.md/)
##How to Use
step.1 Import Scripts
```js
```
step.2 HTML Element
```HTML
page1
page2
page3
```
step.3 Initialization
```js
Zepto(function($){
var $container = $("#container");
$container.pageSlider({
loop:false,
easingTime:600
});
});
```
##Optional Parameters (and Default Setting)
```js
$container.pageSlider({
pageSelector: ".page", //selector for pages. default:`.page`
height: windowHeight, //default: height of window. Support `%` and `px` value.
width: windowWidth, //default: width of window. Support `%` and `px` value.
horizontal: false, //default is a vertical slide, also can be horizontal
autoSpeed: 5000, //autoplay speed
auto: false, //autoplay
loop: true, //loop, whether or not
percentThreshold: 10, //how many percent of move should trigger scroll. defalut is 10% (no `%`)
easing: 'ease-out', //easing function: `linear`, `ease`, `ease-out`(defalut)
easingTime: 400, //easing delay
pageCss: {}, //additional css for pages (no height and width)
prevBtn: null, //prev button
nextBtn: null, //next button
beforeMove: function($currentPage, $toPage, toIndex){}, //callback on beforeMove
afterMove: function($fromPage, $currentPage, currentIndex){} //callback on afterMove
});
```
##Tips
- Do `css reset` by self. Such as `padding` and `margin` reset for body and container. Because of different possible usage, there is no global style sheet.
- A page can have more than one and different instances. Even be included with another. See [examples](https://github.com/mc-zone/Zepto.pageSlider/tree/master/examples/).
##More Examples
[examples](https://github.com/mc-zone/Zepto.pageSlider/tree/master/examples/)
##Compatibility
(Only lists that have been tested. Welcome to make any issue. )
- Android 2.3+
- iOS 6+
## Look forward to your PR !
##License
MIT