最近在使用的一个移动触摸滑动插件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. 树链剖分-点的分治（dis[i]+dis[j]==k的点对数量）

    poj2114 Boatherds Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 1195   Accepted: 387 ...

  2. pta 习题集 5-14 求n以内最大的k个素数以及它们的和

    本题要求计算并输出不超过n的最大的k个素数以及它们的和. 输入格式: 输入在一行中给出n(10≤≤n≤≤10000)和k(1≤≤k≤≤10)的值. 输出格式: 在一行中按下列格式输出: 素数1+素数2 ...

  3. 洛谷P3809 后缀排序【后缀数组】【模板】

    题目背景 这是一道模板题. 题目描述 读入一个长度为 nn 的由大小写英文字母或数字组成的字符串,请把这个字符串的所有非空后缀按字典序从小到大排序,然后按顺序输出后缀的第一个字符在原串中的位置.位置编 ...

  4. 我见过的最完善的log4net配置

    Log4net的优点: 几乎所有的大型应用都会有自己的用于跟踪调试的API.因为一旦程序被部署以后,就不太可能再利用专 门的调试工具了.然而 一个管理员可能需要有一套强大的日志系统来诊断和修复配置上的 ...

  5. Dolls---hdu4160（最大匹配）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4160 有n个长方体形的娃娃:当长宽高都小于另一个的时候可以放进去,每一个里面最多放一个,问最优的套法下 ...

  6. Antenna Placement---poj3020（最大匹配）

    题目链接:http://poj.org/problem?id=3020 题意:每个 ‘*’都需要一个1*2的东西覆盖,问最少需要多少个1*2的东西来覆盖这些‘*’ 和Oil Skimming的题解几乎 ...

  7. Python开发【笔记】：concurrent.futures 平行运算

    平行运算 前言: 编写Python程序时,我们可能会遭遇性能问题,即使优化了代码,程序也依然有可能运行的很慢,从而无法满足我们对执行速度的要求,目前的计算机,其cpu核心数越来越多,于是,我们可以考虑 ...

  8. python获取当天日期进行格式转换

    # Python Library import time def getToday(format=3): """返回今天的日期字串""" # ...

  9. 【Maven学习】Nexus OSS私服仓库的备份与迁移

    背景 在上一篇博客 [Maven学习]Nexus OSS私服仓库的安装和配置 中,我们已经在机房搭建好了新的Nexus OSS私服仓库.下面是两个版本的Nexus OSS私服仓库的对比图. 老的Nex ...

  10. Day02 html回顾和CSS介绍

    昨天内容回顾     1.html的操作思想         ** 使用标签把要操作的数据包起来,通过修改标签的属性值来实现标签内数据样式的变化         *** <font size=& ...