最近在使用的一个移动触摸滑动插件Swiper，功能很强大，跟之前的那个swipe.JS相比，同时支持在PC端滑动，支持上下方向滑动，支持多张图片滑动，支持多屏滑动，凡是你想得到的几乎都可以实现。最近作者还更新了3.0版本，优先支持ios和最新版的Android移动端。

下载代码

可以在github上下载：https://github.com/nolimits4web/Swiper/

或者有bower的，直接安装 $ bower install swiper

使用方法

swiper支持纯js和jQuery两种方式

<!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的更多相关文章

  1. 移动端触摸滑动插件Swiper

    移动端触摸滑动插件Swiper 04/02/2015 一.了解Swiper 目前移动端项目一般都需要具有触屏焦点图的效果,如果你也需要实现这一功能的话,Swiper是一个不错的选择. 1.他不需要加载 ...

  2. 移动端触摸滑动插件Swiper使用指南

    Swiper是一款开源.免费.功能十分强大的移动端内容触摸滑动插件,目前的最新版本是Swiper4.Swiper主要面向的是手机.平板电脑等移动设备,帮助开发者轻松实现触屏焦点图.触屏Tab切换.触屏 ...

  3. 触摸滑动插件 Swiper

    Swiper Swiper  是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端. Swiper中文网里已有详细的使用介绍,我就不多做介绍了. http://www.swiper ...

  4. 仿移动端触摸滑动插件swiper,的简单实现

    ​ /** * @author lyj * @Date 2016-02-04 * @Method 滑动方法 针对一个大容器内部的容器做滑动封装 * @param * args args.swipeDo ...

  5. swiper嵌套小demo(移动端触摸滑动插件)

    swiper(移动端触摸滑动插件) tip:自己敲得Swiper 的小demo,可以复制粘贴看看效果哦. swiper的js包css包下链接地址 :  https://github.com/Clear ...

  6. Swipe-移动端触摸滑动插件swipe.js

    原文链接:http://caibaojian.com/swipe.html 插件特色 viaswipe.JS是一个比较有名的触摸滑动插件,它能够处理内容滑动,支持自定义选项,你可以让它自动滚动,控制滚 ...

  7. Swiper --移动端触摸滑动插件

    Swiper使用方法 1.首先加载插件,需要用到的文件有swiper.min.js和swiper.min.css文件. <!DOCTYPE html> <html> <h ...

  8. swiper.js 移动端触摸滑动插件

    API链接: http://www.swiper.com.cn/api/start/2014/1218/140.html <body> <div class="swiper ...

  9. JS封装移动端触摸滑动插件应用于导航banner【精装版】

    自己封装了一个小插件,一个小尝试. 可用于类似于京东导航等效果,效果多样化,很方便. 欢迎大家提点意见. mrChenSwiper(  {parent, child, type, parentN, c ...

随机推荐

  1. BFS+状态压缩DP+二分枚举+TSP

    http://acm.hdu.edu.cn/showproblem.php?pid=3681 Prison Break Time Limit: 5000/2000 MS (Java/Others)   ...

  2. 试验性的Numpy教程(译)

    Python中Numpy模块学习: 转自:http://my.oschina.net/u/175377/blog/74406

  3. 单机器启动多个tomcat的配置修改

    首先去apache下载一个tomcat,下载解压版的,比较方便   把这个tomcat(我下载的是tomcat7版本),解压两次,为了方便显示,我把解压出来的tomcat重命名成tomcat71和to ...

  4. 借助HTML5 Blob实现文本信息文件下载

    原理其实很简单,我们可以将文本或者JS字符串信息借助Blob转换成二进制,然后,作为<a>元素的href属性,配合download属性,实现下载. 代码也比较简单,如下示意(兼容Chrom ...

  5. poj3974 Palindrome【回文】【Hash】【二分】

    Palindrome Time Limit: 15000MS   Memory Limit: 65536K Total Submissions: 13157   Accepted: 5028 Desc ...

  6. SQLite随机获取一行数据

    Mysql中随机获取一行数据: SELECT * FROM table ORDER BY RAND() limit 1 SQLite中随机获取一行数据: SELECT * FROM table ORD ...

  7. has to be escaped using backslash to be included in string value\n

    [root@d myssh]# cat ESdel_bulk_file1544528090.log{"error":{"root_cause":[{" ...

  8. Andrew Ng机器学习公开课笔记 -- Generative Learning algorithms

    网易公开课,第5课 notes,http://cs229.stanford.edu/notes/cs229-notes2.pdf 学习算法有两种,一种是前面一直看到的,直接对p(y|x; θ)进行建模 ...

  9. Python开发【十八章】：Web框架

    Web框架本质 1.众所周知,对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客户端 #!/usr/bin/env python # -*- codin ...

  10. openstack配置域名访问

    #openstack配置域名访问 openstack pike 安装 目录汇总 http://www.cnblogs.com/elvi/p/7613861.html #主要是在默认配置的基础上,做了个 ...