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. 点滴积累【C#】---操作文件

    操作文件 写入文件效果: 写入文件代码: private void 保存ToolStripMenuItem_Click(object sender, EventArgs e) { try { File ...

  2. atitit.流程标准化--- mysql启动不起来的排查流程attilax总结

    atitit.流程标准化--- mysql启动不起来的排查流程attilax总结 1. mysql的启动日志文件 1 2. console方式 1 3. 安装为服务 1 3.1. 使用默认配置文件 1 ...

  3. 品茗论道说广播(Broadcast内部机制讲解)(下)

    下面我们来看,递送广播动作中最重要的processNextBroadcast(). 3.2 最重要的processNextBroadcast() 从processNextBroadcast()的代码, ...

  4. jsp tld的function 自定义方法扩展

    引入方式示例: <%@ taglib prefix="fns" uri="/WEB-INF/tlds/fns.tld" %> 写法示例: <? ...

  5. Java 调用 C/C++ 之 JNA 系列实战篇 —— 输出char * (六)

    一. 工作环境 1. windows (64位), JDK (64位),dll文件 (64位) 2. Linux (64位),      JDK (64位),so文件 (64位) 3. JNA的官方资 ...

  6. js将秒数换算成时分秒

    转载自:http://jingyan.baidu.com/article/375c8e19a0413925f2a229d2.html <script language="javascr ...

  7. ASP.NET MVC 4新建库项目中找不到 System.Web.Security 的引用

    .NET 4中,WebSecurity的引用已经不再System.Web中,而是转移到了System.Web.ApplicationServices Dll中,添加该Dll即可.

  8. Tuning 04 Sizing the Buffer Cache

    Buffer Cache 特性 The buffer cache holds copies of the data blocks from the data files. Because the bu ...

  9. 常见中文字体在CSS中的Unicode编码(宋体:\5B8B\4F53)

    对于一个从事网页设计(也常说成DIV+CSS)的朋友来说,可能会遇到过这样的问题,就是在CSS里像这样设置某对象的字体:font-family:1.5em/1.75,’黑体’,Arial; 结果有些时 ...

  10. NIPS（Conference and Workshop on Neural Information Processing Systems）

    论文提交时间:5月下旬 会议时间:12月上旬 NIPS2017: 网址:https://nips.cc/