最好的移动触摸滑动插件：Swiper
最近在使用的一个移动触摸滑动插件Swiper，功能很强大，跟之前的那个swipe.JS相比，同时支持在PC端滑动，支持上下方向滑动，支持多张图片滑动，支持多屏滑动，凡是你想得到的几乎都可以实现。最近作者还更新了3.0版本，优先支持ios和最新版的Android移动端。
下载代码
可以在github上下载：https://github.com/nolimits4web/Swiper/
或者有bower的，直接安装 $ bower install swiper
使用方法
<!DOCTYPE html>
<html lang="en">
<head>
...
<link rel="stylesheet" href="path/to/swiper.min.css">
</head>
<body>
...
<script src="path/to/swiper.min.js"></script>
</body>
</html>jQuery方式
<!DOCTYPE html>
<html lang="en">
<head>
...
<link rel="stylesheet" href="path/to/swiper.min.css">
</head>
<body>
...
<script src="path/to/jquery.js"></script>
<script src="path/to/swiper.jquery.min.js"></script>
</body>
</html>html代码
<!-- Slider main container -->
<div class="swiper-container">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
...
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- If we need scrollbar -->
<div class="swiper-scrollbar"></div>
</div>CSS代码
.swiper-container { width: 600px; height: 300px; }js代码
<script>
var mySwiper = new Swiper ('.swiper-container', {
// Optional parameters
direction: 'vertical',
loop: true,
// If we need pagination
pagination: '.swiper-pagination',
// Navigation arrows
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
// And if we need scrollbar
scrollbar: '.swiper-scrollbar',
})
</script>jQuery代码
$(document).ready(function () {
//initialize swiper when document ready
var mySwiper = new Swiper ('.swiper-container', {
// Optional parameters
direction: 'vertical',
loop: true
})
});最好的移动触摸滑动插件：Swiper的更多相关文章
- 移动端触摸滑动插件Swiper
移动端触摸滑动插件Swiper 04/02/2015 一.了解Swiper 目前移动端项目一般都需要具有触屏焦点图的效果,如果你也需要实现这一功能的话,Swiper是一个不错的选择. 1.他不需要加载 ...
- 移动端触摸滑动插件Swiper使用指南
Swiper是一款开源.免费.功能十分强大的移动端内容触摸滑动插件,目前的最新版本是Swiper4.Swiper主要面向的是手机.平板电脑等移动设备,帮助开发者轻松实现触屏焦点图.触屏Tab切换.触屏 ...
- 触摸滑动插件 Swiper
Swiper Swiper 是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端. Swiper中文网里已有详细的使用介绍,我就不多做介绍了. http://www.swiper ...
- 仿移动端触摸滑动插件swiper,的简单实现
/** * @author lyj * @Date 2016-02-04 * @Method 滑动方法 针对一个大容器内部的容器做滑动封装 * @param * args args.swipeDo ...
- swiper嵌套小demo(移动端触摸滑动插件)
swiper(移动端触摸滑动插件) tip:自己敲得Swiper 的小demo,可以复制粘贴看看效果哦. swiper的js包css包下链接地址 : https://github.com/Clear ...
- Swipe-移动端触摸滑动插件swipe.js
原文链接:http://caibaojian.com/swipe.html 插件特色 viaswipe.JS是一个比较有名的触摸滑动插件,它能够处理内容滑动,支持自定义选项,你可以让它自动滚动,控制滚 ...
- Swiper --移动端触摸滑动插件
Swiper使用方法 1.首先加载插件,需要用到的文件有swiper.min.js和swiper.min.css文件. <!DOCTYPE html> <html> <h ...
- swiper.js 移动端触摸滑动插件
API链接: http://www.swiper.com.cn/api/start/2014/1218/140.html <body> <div class="swiper ...
- JS封装移动端触摸滑动插件应用于导航banner【精装版】
自己封装了一个小插件,一个小尝试. 可用于类似于京东导航等效果,效果多样化,很方便. 欢迎大家提点意见. mrChenSwiper( {parent, child, type, parentN, c ...
随机推荐
- swoole--PHP的异步、并行、高性能网络通信引擎
swoole目前已被多家移动互联网.物联网.网络游戏.手机游戏企业使用,替代了C++.Java等复杂编程语言来实现网络服务器程序. 使用PHP+Swoole,开发效率可以大大提升.官方提供了基于swo ...
- pta 习题集5-17 哥尼斯堡的“七桥问题”
哥尼斯堡是位于普累格河上的一座城市,它包含两个岛屿及连接它们的七座桥,如下图所示. 可否走过这样的七座桥,而且每桥只走过一次?瑞士数学家欧拉(Leonhard Euler,1707-1783)最终解决 ...
- 使用google字体发生http://fonts.gstatic.com/s/ubuntu/v8/_aijTyevf54tkVDLy-dlnFtXRa8TVwTICgirnJhmVJw.woff2
我在使用adminTLE后台模板时,有时候会有 http://fonts.gstatic.com/s/ubuntu/v8/_aijTyevf54tkVDLy-dlnFtXRa8TVwTICgirnJh ...
- python3安装后无法使用退格键的问题
# 安装readline模块 yum -y install readline-devel # 进入Python安装目录 cd /usr/python/Python- # 重新安装 ./configur ...
- 多线程下载图片,滑动tableView崩溃--资源抢夺问题
最近练习使用NSoperation模拟SDWebImage下载图片,发生了崩溃的问题,还专门写博客记录这件事情: http://www.cnblogs.com/tufei7/p/7074030.htm ...
- 001-jpa基本概念以及基础注解
一.什么是JPA JPA是Java Persistence API的简称,中文名Java持久层API,是JDK 5.0注解或XML描述对象-关系表的映射关系,并将运行期的实体对象持久化到数据库中. S ...
- unittest框架（一）用例管理
在unittest框架的自动化接口测试中,可以用yaml文件来管理用例,这样一方面,不会像excel管理用例那么死板:另一方面,数据读取出来就是一个字典,便于取值,用起来更灵活. 首先,需要安装一个模 ...
- JDK eclipse selenium的安装以及环境变量的配置
未经允许,禁止转载!!! 未经允许,禁止转载!!! 首先下载安装JDK: 然后双击进行安装 选着第一个:开发工具!点击next 一定要记住:Install to: C:\Program Files\ ...
- zip和tgz以及exe的区别
在下载东西的时候总是碰见后缀是.tar.gz和.zip的问题,搞不清楚是怎么回事,不晓得下载哪个文件才是对自己有用的. 后来才知道,其实这两个压缩文件里面包含的内容是一样的,只是压缩格式不一样, ta ...
- 2.8 The Object Model -- Enumerables
在Ember.js中,枚举是包含许多子对象的任何对象,并允许你使用Ember.Enumerable API和那些子对象一起工作.在大部分应用程序中最常见的可枚举是本地JS数组,Ember.js扩展到符 ...