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. Adreno Profiler连接安卓手机profile第三方app渲染过程

    1,下载Android SDK,adb在Android SDK/platform-tools下. 2,添加adb环境变量:http://www.cnblogs.com/xwlyun/archive/2 ...

  2. php容易忽视的地方

    一:bool in_array ( mixed $needle , array $haystack [, bool $strict ] ) 用的时候加最后一个参数,判断类型 <?php $a = ...

  3. U3D Debug.DrawRay

    Debug.DrawRay第二个参数方向,事实上需要手动输入长度.并且不是无限长的射线,是根据方向的长度来的 如果参数不指定颜色,绘制出来的就是白色

  4. 多线程-Thread与Runnable源码分析

    Runnable: @FunctionalInterface public interface Runnable { /** * When an object implementing interfa ...

  5. java 发送带Basic Auth认证的http post请求实例代码

    构造http header private static final String URL = "url"; private static final String APP_KEY ...

  6. redis源码学习_简单动态字符串

    SDS相比传统C语言的字符串有以下好处: (1)空间预分配和惰性释放,这就可以减少内存重新分配的次数 (2)O(1)的时间复杂度获取字符串的长度 (3)二进制安全 主要总结一下sds.c和sds.h中 ...

  7. JS高程3:面向对象的程序设计——理解对象

    JS中对象的定义: (无序)属性的集合 (无序)值的集合 (无序)名值对的集合 JS对象是基于引用数据类型来创建的. JS对象创建的2种方式: 传统方式 对象字面量 var person = new ...

  8. PL/SQL开发五年工作经验精典实例

    1. minus(差集)与intersect(交集) minus指令是运用在两个SQL语句上.它先找出第一个SQL语句所产生的结果,然后看这些结果有没有在第二个SQL语句的结果中,如果有的话,那这一笔 ...

  9. 27. Retrofit2 -- How to Use Dynamic Urls for Requests

    27. Retrofit2 -- How to Use Dynamic Urls for Requests Retrofit tutorial 用户案例场景 如何使用动态 Url 相对于基本地址,动态 ...

  10. STM32F10x_SPI(硬件接口 + 软件模拟)读写Flash(25Q16)

    推荐 分享一个大神的人工智能教程.零基础!通俗易懂!风趣幽默!还带黄段子!希望你也加入到人工智能的队伍中来! http://www.captainbed.net/strongerhuang Ⅰ.写在前 ...