swiper插件简介及用法
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插件简介及用法的更多相关文章
- swiper插件的简单使用，实现图片轮播
移动端和p c端经常会遇到写轮播图的情况,这里只是简单的说一下swiper插件的简单用法(移动端为例). <!DOCTYPE html> <html lang="en&qu ...
- Sublime 常用插件简介
Sublime 常用插件简介 emmet: 前端必备神器.花个十几分钟学下Emmet语法 ,就可以极大提高web开发者HTML和CSS工作效率啦.一句话,牛逼---必备 CSS3: CSS3语法高 ...
- 关于内存泄露分析插件 MAT 的用法
关于内存泄露分析插件 MAT 的用法,建议大家有时间看一下,下面的文章 http://www.blogjava.net/rosen/archive/2010/05/21/321575.html htt ...
- 移动端网站的内容触摸滑动-Swiper插件
手机平板等大多移动端站点都会有触摸滑动内容的功能,公司移动端站点(m.muzhiwan.com)的标题广告滑动以及轮播效果就是用的Swiper插件. Swiper就是常用于移动端网站的内容触摸滑动的一 ...
- Cwinux简介及用法简述
我在我的个人博客上发表了一篇文章 Cwinux简介及用法简述 http://apprentice89.com/cwinux_introduction_and_use/
- Notepad++ 几款实用插件简介，让你的 Notepad++ 如虎添翼
Notepad++ 是一款非常优秀的文本编辑器,非常适合编辑源代码.Notepad++ 安装时已经附带有 Compare 等优秀插件,通过其 Plugin Manager 可以下载更多实用插件. 一. ...
- Jquery插件placeholder的用法
闲的蛋疼,演示一下Jquery插件placeholder的用法,借助该插件能够轻松实现HTML5中placeholder特效: 效果图: 实现代码: <%@ page language=&quo ...
- Android插件简介
/** * @actor Steffen.D * @time 2015.02.06 * @blog http://www.cnblogs.com/steffen */ Android插件简介 Andr ...
- sleep、yield、join方法简介与用法 sleep与wait区别 多线程中篇（十五）
Object中的wait.notify.notifyAll,可以用于线程间的通信,核心原理为借助于监视器的入口集与等待集逻辑 通过这三个方法完成线程在指定锁(监视器)上的等待与唤醒,这三个方法是以锁( ...
随机推荐
- MySQL-group-replication 配置
MySQL-Group-Replication 是mysql-5.7.17版本开发出来的新特性:它在master-slave 之间实现了强一致性, 但是就目前来说主要是性能不太好. [1]确定当前的m ...
- Linux下双网卡-双外网网关-电信联通双线主机设置
1.实现:通过运营商提供的智能DNS,把电信用户访问时,数据进电信的网卡,出来时也从电信的网关出来,访问联通时,从联通网卡时,联通网卡出.这样速度就会快,实现双线主机的功能. 2.网卡信息:电信IP( ...
- Mysql暴错注入代码-webshell
MySql Error Based Injection Reference[Mysql暴错注入参考]Author:Pnig0s1992Mysql5.0.91下测试通过,对于5+的绝大部分版本可以测 ...
- Vivado的helloword程序：软件工程部分
建立工程 Export结束后,会自动启动SDK.界面如下.可以看到工程浏览器Project Explorer中已经有一个硬件平台hw_platform_0,里面有一系列配置和初始化文件.不要修改这些文 ...
- Xcode 警告信息处理：Format string is not a string literal (potentially insecure)
转自:http://www.oschina.net/question/54100_33881 NSObject *obj = @"A string or other object." ...
- pow函数
pow函数如果直接强制类型转换成int,会导致精度的损失.如果是int的幂计算,建议重写函数.或者用double型进行计算.
- windows7常用操作命令
1.打开命令行 按住Windows键加R键,打开运行窗口 2.打开笔记本 运行窗口中输入:notepad,点击确定或回车,打开记事本工具 主要作用:浏览网页时,看到一些有用的话,那么你是怎么把它记录下 ...
- The Boss on Mars
The Boss on Mars Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) ...
- php 判断时间是否超过
$str="2014-10-11"; echo "".strtotime($str); echo "<br/>"; echo & ...
- 第二百二十二节，jQuery EasyUI，DataGrid(数据表格)组件
jQuery EasyUI,DataGrid(数据表格)组件 学习要点: 1.加载方式 2.分页功能 本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于 Pa ...