-
bear
+
+
它无孔不入
-
-
kiki
+
+
你无处可藏
+
+
+
+
不是它可恶
+
+
+
+
而是它不懂你
+
+
+
+
我们试图
+
+
+
+
做些改变
@@ -62,6 +78,8 @@
- `direction`:String,滑动方向,默认值`vertical`;横向滑动时为`horizontal`
+- `activeClass`: String,当前屏激活时添加的类名;默认值`active`
+
- `threshold`:Number,滑动距离阀值,默认值`50`,当按住屏幕滑动超过此距离,松开手时,自动滑到下一屏,否则不滑动
- `duration`:Number,滑屏动画时间,单位`ms`,默认值`300`;数值越小,滑动越快,越刺激
@@ -74,45 +92,21 @@
- `swiped`:滑动**结束时**,触发`swiped`事件,回调函数传入两个参数,分别是上一屏和当前屏索引,从`0`算起。举例,从第一屏滑动到第二屏结束时:
```javascript
- var swiper = new Siper();
+ var swiper = new Swiper();
swiper.on('swiped', function(prev, current){
console.log('上一屏:', prev); // 0
console.log('当前屏:', current); // 1
});
```
-###HTML属性
-
-- toggle-class
-
-通常,制作此类页面,都是滑动时,对某些元素添加或者移除某些`class`,因此`swiper.js`支持在需要切换`class`的元素中,预先写入`toggle-class`属性。当滑动到当前屏时,自动查找拥有`toggle-class`属性的元素,并且为之添加上`toggle-class`的值,同时对上一屏中,拥有`toggle-class`属性的元素,移除`toggle-class`的值。如果需要添加或移除多个`class`,则以空格分隔。
+### 方法
-- data-delay
+- `next`: 主动滑动到下一屏。
-添加class的延时时间,单位`ms`。
-
-举例:
-
-```html
-
-
-
-
bear
-
- jf
-
-
-
-
kiki
-
-
```
-
-##体验
-
-![](http://wechatui.github.io/swiper/images/example.jpg)
-
-![](http://wechatui.github.io/swiper/images/example2.jpg)
+ var swiper = new Swiper();
+ swiper.next();
+```
##License
diff --git a/bower.json b/bower.json
index ae56e38..cd9b230 100644
--- a/bower.json
+++ b/bower.json
@@ -1,7 +1,7 @@
{
"name": "iswiper",
"description": "为移动端而生的滑动框架,无依赖,轻盈小巧,性能极致",
- "version": "1.3.1",
+ "version": "1.4.0",
"author": "wechat ui team",
"keywords": [
"iswiper",
diff --git a/dist/example/0.jpg b/dist/example/0.jpg
deleted file mode 100644
index ef35433..0000000
Binary files a/dist/example/0.jpg and /dev/null differ
diff --git a/dist/example/1.jpg b/dist/example/1.jpg
deleted file mode 100644
index 46a5ac4..0000000
Binary files a/dist/example/1.jpg and /dev/null differ
diff --git a/dist/example/2.jpg b/dist/example/2.jpg
deleted file mode 100644
index 42c3c70..0000000
Binary files a/dist/example/2.jpg and /dev/null differ
diff --git a/dist/example/3.jpg b/dist/example/3.jpg
deleted file mode 100644
index 5251b4d..0000000
Binary files a/dist/example/3.jpg and /dev/null differ
diff --git a/dist/example/example.css b/dist/example/example.css
index f9cac0a..37f41d8 100644
--- a/dist/example/example.css
+++ b/dist/example/example.css
@@ -7,56 +7,59 @@ body {
height: 100%;
overflow: hidden;
}
-.swiper {
+.container{
height: 100%;
- -webkit-transition: all 0.3s ease;
- -moz-transition: all 0.3s ease;
- -o-transition: all 0.3s ease;
- transition: all 0.3s ease;
+ background-color: #efeff4;
}
-.item {
- height: 100%;
- background-position: center center;
- background-size: cover;
- position: relative;
- overflow: hidden;
- float: left;
-}
-.item .animated{
- display: block !important;
+.item{
+ color: #ffffff;
+ background-color: #000000;
}
-
-.item .title{
+.title{
+ margin-top: 50%;
text-align: center;
- display: none;
- position: absolute;
- top: 50%;
- margin-top: -100px;
- width: 100%;
}
-.item .signature{
- display: none;
- position: absolute;
- top: 50%;
- width: 100%;
- text-align: center;
+/**
+ * copy from animate.css
+ * https://daneden.github.io/animate.css
+ */
+
+.animated {
+ -webkit-animation-duration: 1s;
+ animation-duration: 1s;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
}
+@-webkit-keyframes fadeInUp {
+ from {
+ opacity: 0;
+ -webkit-transform: translate3d(0, 100%, 0);
+ transform: translate3d(0, 100%, 0);
+ }
-.item .signature2{
- display: none;
- position: absolute;
- top: 50%;
- width: 100%;
- margin-top: 50px;
- text-align: center;
+ 100% {
+ opacity: 1;
+ -webkit-transform: none;
+ transform: none;
+ }
}
-.item1{
- background: #576477;
- color: #ffffff;
+@keyframes fadeInUp {
+ from {
+ opacity: 0;
+ -webkit-transform: translate3d(0, 100%, 0);
+ transform: translate3d(0, 100%, 0);
+ }
+
+ 100% {
+ opacity: 1;
+ -webkit-transform: none;
+ transform: none;
+ }
}
-.item2{
- background: #000000;
- color: #ffffff;
+
+.fadeInUp {
+ -webkit-animation-name: fadeInUp;
+ animation-name: fadeInUp;
}
\ No newline at end of file
diff --git a/dist/example/index.html b/dist/example/index.html
index dbc8eee..29e3749 100644
--- a/dist/example/index.html
+++ b/dist/example/index.html
@@ -3,28 +3,40 @@
-
albums
-
+
无孔不入
+
-
+
-
-
i am bear
-
bear is x
-
x is bear
+
+
它无孔不入
-
-
i am jf
-
hello
-
word
+
+
你无处可藏
+
+
+
+
不是它可恶
+
+
+
+
而是它不懂你
+
+
+
+
我们试图
-
-
-
+
+
做些改变
+
+
+
+
+