最近在使用的一个移动触摸滑动插件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. 微信小程序 --- 绘画

    cavans及context详解 绘画API的使用 游戏的制作

  2. Java.lang的研究(分析包含的重要类和接口）

    Java.lang包是Java中使用最广泛的一个包,它包含很多定义的类和接口. java.lang包包括以下这些类: Boolean Byte Character Class ClassLoader ...

  3. nginx 认证访问web

    htpasswd -c /usr/local/nginx/passwd.db huo nginx .conf文件添加↓:

  4. 理论实践：循序渐进理解AWR细致入微分析性能报告

    1. AWR 概述 Automatic Workload Repository(AWR) 是10g引入的一个重要组件.在里面存贮着近期一段时间内(默认是7天)数据库活动状态的详细信息. AWR 报告是 ...

  5. socketserver源码解析和协程版socketserver

    来,贴上一段代码让你仰慕一下欧socketserver的魅力,看欧怎么完美实现多并发的魅力 client import socket ip_port = ('127.0.0.1',8009) sk = ...

  6. github push error ---- recursion detected in die handler

    错误提示如下: 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 New Bitmap Image.bmp Coun ...

  7. Java-idea-Checkstyle自动化代码规范检查

    一.概述 CheckStyle是SourceForge下的一个项目,提供了一个帮助JAVA开发人员遵守某些编码规范的工具.它能够自动化代码规范检查过程,从而使得开发人员从这项重要,但是枯燥的任务中解脱 ...

  8. Spring源码解析（五）循环依赖问题

    引言 循环依赖就是多个类之间互相依赖,比如A依赖B,B也依赖A,如果日常开发中我们用new的方式创建对象,这种循环依赖就会导致不断的在创建对象,导致内存溢出. Spring是怎么解决循环依赖的问题的? ...

  9. 9.python的列表

    list2 = [1, 2, 3, 4, 5, 6, 7 ]; print ("list2[1:5]: ", list2[1:5]) 得到 list2[1:5]:  [2, 3, ...

  10. python学习之路-day10

    一.什么是线程 在传统操作系统中,每个进程有一个地址空间,而且默认就有一个控制线程. 线程顾名思义,就是一条流水线工作的过程,一条流水线必须属于一个车间,一个车间的工作过程是一个进程. 车间负责把资源 ...