微信h5开发之滑动翻页效果组件推荐：iSlider

如今微信H5开发越来越频繁，很多设计师也开始转行来学习移动H5开发，除了设计一些精美的UI界面以外，自己也想编辑一些高效性能的前端H5代码。

比如目前最常见的 应该是微信h5的滑动翻页效果吧。无论是纵向滑动翻页，还是横向滑动翻页，在配合CSS3动画效果组件就可以快速完成一个绚丽的H5案例。

比如这样的H5的开发案例：比如丽人丽妆2015年招聘的h5页面宣传

今天，25学堂跟爱好微信h5开发的童鞋们分享一个高性能H5全屏滑动组件。

该H5滑动翻页效果组件名称：iSlider   

该H5滑动翻页效果组件的广告语就是：如丝般高性能H5全屏滑动组件

1、简洁, 易用, 半行代码搞定.

2、性能卓越, 如丝般高性能全屏动画滑屏组件.

3、耦合完全分离, 更轻量, 无CSS依赖,无任何js库依赖.

4、一个组件只做一个事情, 专注于页面滑动, 避免冗余 , 保证性能.

官网：http://kele527.github.io/iSlider/

微信h5开发之滑动翻页效果组件推荐：iSlider的Demo演示：

纵向的H5的滑动效果：可以扫描下面的二维码进行预览。

横向的H5的滑动效果：可以扫描下面的二维码进行预览。

2个H5的滑动翻页效果的源码可以参考这2个案例。

DEMO1: 垂直滑动                                    DEMO2: 水平滑动

分为2个步骤来学习和实践：

第一步：打开案例，查看源码。

第二步：复制源码到本地电脑上，自己修改对应的图片和参数即可。当然，这个过程是需要你懂一些基本的前端代码知识。

第三步：这个不太会用，可以用这个H5滑动插件

一直用的是swiper.js这个, 感觉很不错。

官方地址：http://www.idangero.us/swiper

中文地址：http://www.swiper.com.cn

如果还有不明白的，可以加25学堂的群来咨询。