https://github.com/bradbirdsall/Swipe
下面我们一起去做一个触摸友好的幻灯片 … 在你的 iPhone 或者 iPad 上，你可以左右扫动手指来控制幻灯片的显示 …
这里我们需要用到一个小插件 …. swipe js …. 先去下载它 …
点击 Download Zip …
解压一下 … 把 swipe.js 这个文件放在我们的网页项目里 … 你可以使用课程资料包里的 xx-xx 这个项目..
放在 js 目录下 …
打开网页 … 先在 <head> 标签上嵌入这个 js 文件 …
script:src … js/swipe.js …
HTML
下面我们可以去准备 Swipe 幻灯片需要的 HTML 代码结构 … 回到 swipe 项目的网页 … 可以直接复制这个结构 ….
回到网页 … 粘贴在 showcase 这个 <div> 标签里面 …
幻灯片的最外边的容器上需要定义一个 id … 这里是 slider … 你可以修改成其它的 id … 一会在初始化幻灯片的时候，需要用到这个 id …
同时这个容器上，还添加了一个 swipe 的类 … 我们需要用到它去添加一些样式 …
它的里面又是一组 <div> 标签 … 上面有一个 swipe-wrap 类 … 同样需要用它去应用一些样式 …
然后就是每一个幻灯片项目 … 每个项目都可以放在各自的 <div> 标签里 …
我们可以去为每个幻灯片项目里都添加一张图片 …
img …. 01.jpg … 02.jpg ….
CSS
下面要去为幻灯片添加些必要的样式 … 回到 swipe 项目页面 … 复制一下这块必要的样式 …
打开网页项目的样式表 …
输入点注释 … Swipe … 把样式粘贴到下面 ….
初始化
想让这个幻灯片工作，我们还得告诉 swipe … 幻灯片所在的容器 … 这里需要用到一行 js 代码 … 回到 swipe 项目的页面 … 复制一下这行代码 …
回到我们自己的网页项目 .. 可以把刚才复制的代码粘贴到页面的最下面 …
先输入一组 <script> 标签 … 粘贴过来 ….
这里的 getElementByID 后面的括号里的字符 … 就是在幻灯片容器上定义的 ID … 如果你修改了容器上的 ID ，在这里，可以把这个 slider … 改成你修改之后的 ID …
演示
现在，我们的幻灯片应该就可以工作了。
打开 iOS 模拟器 …
这里我们可以使用鼠标拖拽的方式来模拟手指的左右扫动 ….
使用这种方式，可以控制幻灯片的显示 …
