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,可以用于线程间的通信,核心原理为借助于监视器的入口集与等待集逻辑 通过这三个方法完成线程在指定锁(监视器)上的等待与唤醒,这三个方法是以锁( ...
随机推荐
- unity, GetComponent<MeshRenderer>().sharedMaterial 与 GetComponent<MeshRenderer>().material
我多个物体用的是同一个material,当我用gameObject.GetComponent<MeshRenderer>().sharedMaterial.SetColor("_ ...
- 点滴积累【C#】---C#实现上传word将路径保存到数据库，文件保存到服务器。并且按照名称读取服务器的word
效果: 1. . . 数据库: 思路: 上传:先获取word物理地址,然后根据文件的类型判断,然后再保存到相应的文件夹下,再把路径插入到数据库中. 读取:首先根据输入的文件名字在数据库中查找出来文件的 ...
- flink checkpoint 源码分析 （二）
转发请注明原创地址http://www.cnblogs.com/dongxiao-yang/p/8260370.html flink checkpoint 源码分析 (一)一文主要讲述了在JobMan ...
- poj 3017 Cut the Sequence（单调队列优化 ）
题目链接:http://poj.org/problem?id=3017 题意:给你一个长度为n的数列,要求把这个数列划分为任意块,每块的元素和小于m,使得所有块的最大值的和最小 分析:这题很快就能想到 ...
- poj 3617 Best Cow Line (字符串反转贪心算法)
Best Cow Line Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 9284 Accepted: 2826 Des ...
- ZThread在Windows下打印若干DEBUG信息到console的原因
代码见这篇随笔 在Windows下的运行结果:ZThread打印了一堆东西(并不是我写的) 文件结构: 最开始我以为是编译选项没弄对,同样的代码放到Linux下编译,还是打印这些信息 注意我在Linu ...
- .net获取客户端IP
using System; using System.Data; using System.Configuration; using System.Web; using System.Web.Secu ...
- hbase java Api练习
package cn.itcast_01_hbase; import java.util.ArrayList; import java.util.List; import org.apache.had ...
- linux-centos jdk安装
第一步:查看Linux自带的JDK是否已安装 (卸载centOS已安装的1.4) 安装好的CentOS会自带OpenJdk,用命令 java -version ,会有下面的信息: java versi ...
- dubbo配置约束
此处主要记录dubbo配置的一些约束规则. 采用官网提供的原文,描述如下: 一.XML配置(官网原文) 以 timeout 为例: 方法级优先,接口级次之,全局配置再次之. 如果级别一样,则消费方优先 ...