swiper

Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。
Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。
Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择

1.首先创建一个swiper的运行环境，需要用到的文件有swiper.min.js和swiper.min.css文件。

<!DOCTYPE html>

<html>

　　<head>

　　　　...

　　　　<link rel="stylesheet" href="path/to/swiper.min.css">

　　</head>

　　<body>

　　　　...

　　</body>
　　<script src="path/to/swiper.min.js"></script>
</html>

2.写HTML内容。

<div class="swiper-container">

　　<div class="swiper-wrapper">

　　　　<div class="swiper-slide">Slide 1</div>

　　　　<div class="swiper-slide">Slide 2</div>

　　　　<div class="swiper-slide">Slide 3</div>

　　</div>

　　<!-- 如果需要分页器 -->

　　<div class="swiper-pagination"></div>

</div>

3.你可能想要给Swiper定义一个大小，当然不要也行。

.swiper-container {

　　width: 600px;

　　height: 300px;

}

4.初始化Swiper：最好是挨着</body>标签 （函数调用）

<script>

　　　　var swiper=new Swiper('.swiper-container',{
　　　　　　autoplay:1000,//自动轮播
　　　　　　autoplayDisableOnInteraction:false,//滑动后继续滚动
　　　　　　loop:true,//循环
　　　　　　pagination:'.swiper-pagination',//分页
　　　　　　paginationClickable:true,//小圆点点击
　　　　　　spaceBetween:30,//图片间隙
　　　　　　direction:"horizontal"//默认横向 vertical垂直
　　　　})

</script>

</body>

swiper插件简介及用法的更多相关文章

  1. swiper插件的简单使用，实现图片轮播

    移动端和p c端经常会遇到写轮播图的情况,这里只是简单的说一下swiper插件的简单用法(移动端为例). <!DOCTYPE html> <html lang="en&qu ...

  2. Sublime 常用插件简介

    Sublime   常用插件简介 emmet: 前端必备神器.花个十几分钟学下Emmet语法 ,就可以极大提高web开发者HTML和CSS工作效率啦.一句话,牛逼---必备 CSS3: CSS3语法高 ...

  3. 关于内存泄露分析插件 MAT 的用法

    关于内存泄露分析插件 MAT 的用法,建议大家有时间看一下,下面的文章 http://www.blogjava.net/rosen/archive/2010/05/21/321575.html htt ...

  4. 移动端网站的内容触摸滑动-Swiper插件

    手机平板等大多移动端站点都会有触摸滑动内容的功能,公司移动端站点(m.muzhiwan.com)的标题广告滑动以及轮播效果就是用的Swiper插件. Swiper就是常用于移动端网站的内容触摸滑动的一 ...

  5. Cwinux简介及用法简述

    我在我的个人博客上发表了一篇文章 Cwinux简介及用法简述 http://apprentice89.com/cwinux_introduction_and_use/

  6. Notepad++ 几款实用插件简介，让你的 Notepad++ 如虎添翼

    Notepad++ 是一款非常优秀的文本编辑器,非常适合编辑源代码.Notepad++ 安装时已经附带有 Compare 等优秀插件,通过其 Plugin Manager 可以下载更多实用插件. 一. ...

  7. Jquery插件placeholder的用法

    闲的蛋疼,演示一下Jquery插件placeholder的用法,借助该插件能够轻松实现HTML5中placeholder特效: 效果图: 实现代码: <%@ page language=&quo ...

  8. Android插件简介

    /** * @actor Steffen.D * @time 2015.02.06 * @blog http://www.cnblogs.com/steffen */ Android插件简介 Andr ...

  9. sleep、yield、join方法简介与用法 sleep与wait区别 多线程中篇（十五）

    Object中的wait.notify.notifyAll,可以用于线程间的通信,核心原理为借助于监视器的入口集与等待集逻辑 通过这三个方法完成线程在指定锁(监视器)上的等待与唤醒,这三个方法是以锁( ...

随机推荐

  1. php-fig组织fig-standards的一些标准

    参考: http://psr.phphub.org/ https://github.com/php-fig/fig-standards https://github.com/PizzaLiu/PHP- ...

  2. 记一下吧，又记不住啦。pipe

    currencydateuppercasejsonlimitTolowercaseasyncdecimalpercent ts == import { CurrencyPipe } from '@an ...

  3. 多线程-ThreadPoolExecutor

    线程池 线程池是可以控制线程创建.释放.并通过某种策略尝试复用线程去执行任务的一种管理框架,从而实现线程资源与任务之间的一种平衡. 类图 Executor Executor是最基本的执行接口:“执行者 ...

  4. Atitit.导出excel功能的设计 与解决方案

    Atitit.导出excel功能的设计 与解决方案 1.1. 项目起源于背景1 1.2. Js  jquery方案(推荐)jquery.table2excel1 1.3. 服务器方案2 1.4. 详细 ...

  5. @property （nonatomic,retain)中的nonatom和retain的意思

    转自:http://yuanshoupeng2005.blog.163.com/blog/static/68235027201235113952886/ http://baike.baidu.com/ ...

  6. flink on yarn部分源码解析 (FLIP-6 new mode)

    我们在https://www.cnblogs.com/dongxiao-yang/p/9403427.html文章里分析了flink提交single job到yarn集群上的代码,flink在1.5版 ...

  7. （译）Getting Started——1.3.3 Working with Foundation（使用Foundation框架）

    在你使用Objective-C语言开发应用时,你会发现在开发中,你会用到很多框架.尤其是Foundation框架,该框架为应用提供了最基础的服务.Foundation框架包括了代表着基本数据类型的va ...

  8. （译）Getting Started——1.2.2 Desinging a User Interface（设计用户界面）

    ​      用户需要以最简单的方式与应用界面进行交互.应该从用户的角度出发设计页面,使得界面更高效.简捷和直接. storyboard以图形化的方式帮助你设计和实现界面.在设计和实现界面的过程中,你 ...

  9. NGUI本地化

    之前在网上的NGUI本地化教程是基于老版本的了,现在用的3.7版本已经改了很多,以前的本地化教程有点不适用了. 1.资源: 本地化的txt文本起名叫做Chinese.txt,到resource目录下新 ...

  10. vsftpd服务tar包安装

    一般如果有网络ubuntu直接apt-get install 安装vsftpd服务即可. 没网络只能下好vsftpd的tar包自己安装配置. 1. 解压 tar -xvf vsftpd-3.0.2.t ...