Swiper - 移动端触摸滑块幻灯片插件

2016-12-22  本文已影响142人  microkof

Swiper github网址:https://github.com/thebird/swipe

Swiper Demo演示:http://www.idangero.us/swiper/demos/

Swiper API:http://www.idangero.us/swiper/api/

这个插件的流行度很高,而且不依赖jQuery,今天我试用了一下。

它跟一般的轮播图插件的区别在于:
一、它比一般轮播图做的事要多很多,官方源码里提供了高达39个demo。
二、它对移动端非常友好,比如:不依赖别的库、自身K数很低、支持触摸滑动。
今天的练习项目是:实现手机端H5向上滑动翻页的效果,也就是易企秀之类的商业H5平台提供的默认翻页效果。

下载源码之后找到demo文件夹,看第20个例子。

修改HTML:

    html, body {
        position: relative;
        height: 100%;
        max-width: 640px; /* 最大宽度640px,尽量适配PC浏览器的效果 */
    }
    body {
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color:#000;
        margin: 0 auto; /* 元素居中 */
        padding: 0;
    }
上一篇下一篇

猜你喜欢

热点阅读