最近在使用的一个移动触摸滑动插件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. git add -A和git add . 的区别

    git add -A和 git add . git add -u在功能上看似很相近,但还是有所差别. git add . :他会监控工作区的状态树,使用它会把工作时的所有变化提交到暂存区,包括文件内容 ...

  2. 从零打造在线网盘系统之Struts2框架起步

    欢迎浏览Java工程师SSH教程从零打造在线网盘系统系列教程,本系列教程将会使用SSH(Struts2+Spring+Hibernate)打造一个在线网盘系统,本系列教程是从零开始,所以会详细以及着重 ...

  3. postgresql----LIKE和SIMILAR TO

    LIKE和SIMILAR TO都支持模糊查询,另外SIMILAR TO还支持正则表达式查询.模糊查询中有两个重要的符号:下划线'_'匹配任意单个字符,百分号'%'匹配任意多个字符,可以是0个,如果想匹 ...

  4. C#生成流水号编码[a-z(不包括i和o) 按0-9　a-z的顺序)]

    using System; using System.Collections.Generic; using System.Linq; using System.Threading.Tasks; nam ...

  5. Oracle HA 之 基于活动数据库复制配置oracle 11.2 dataguard

    规划:主库:db_name=dbking               db_unique_name=dbkingpri               备库:db_name=dbking          ...

  6. Python的Flask框架应用调用Redis队列数据的方法

    转自:http://www.jb51.net/article/86021.htm 任务异步化 打开浏览器,输入地址,按下回车,打开了页面.于是一个HTTP请求(request)就由客户端发送到服务器, ...

  7. logging.basicConfig参数简介

    通过logging.basicConfig函数对日志的输出格式及方式做相关配置 import logging logging.basicConfig(level=logging.DEBUG, form ...

  8. Cardano(ADA)， EOS, RChain(RHOC), Aeternity(AE) 都是极其好的币

    从区块链的基础知识出发,研究ETH和EOS的区别 免责声明:EOS目前还在开发中,我们对此项目的一些理解可能会改变.而且,我并不是以太坊开发者,而只是一个喜欢区块链的爱好者.请牢记这两点,请把下面的内 ...

  9. 什么是API测试

    什么是API API是Application Programming Interface的简写. 实现了两个或多个独立系统或模块间的通信和数据交换能力. 什么是API测试 图片.png API测试是不 ...

  10. forEach方法的实现

    var arr = [1, 23, 1, 1, 1, 3, 23, 5, 6, 7, 9, 9, 8, 5]; Array.prototype.forEach = Array.prototype.fo ...