导入三个文件

jquery-1.11.1.min.js,swiper.min.js,swiper.min.css

攻略教程

http://www.swiper.com.cn/api/function/2014/1218/111.html

例子:只需要定义下Ban的高度即可,position:relatival   ,这个可以不用定义

#Ban{height: 398px}

<div class="swiper-container" id="Ban">
<div class="swiper-wrapper">
<div class="swiper-slide bg-01">slider1</div>
<div class="swiper-slide bg-02">slider2</div>
<div class="swiper-slide bg-03">slider9999</div>
</div>
</div>

<script>
var mySwiper = new Swiper('#Ban',{
autoplay : 1000,

})
</script>

Swiper基本上使用的更多相关文章

  1. 前端笔记之移动端&响应式(下)默认样式&事件&惯性抛掷&swiper&loaction对象

    一.移动端默认样式 ·IOS和Android下触摸元素时出现半透明灰色遮罩 a,input,button{ -webkit-tap-highlight-color: transparent; } ·I ...

  2. 用原生js来写一个swiper滑块插件

        是不是有点印象了,没错,他的最基本的用法就是左右滑动,插件使用者只需要写几行简单的html和js即可实现一个简单滑动效果,不过你完全可以组合各种元素来适应不同的场景. 当然插件我已经写好了,咱 ...

  3. swiper插件 纵向内容超出一屏解决办法

    1.css .swiper-slide { overflow: auto; } 2.js var swiper = new Swiper('.swiper-container', { directio ...

  4. swiper的初步使用

    1.引入文件,顺序引入(此处基于jquery,且版本至少1.7以上) <link rel="stylesheet" href="path/to/swiper-3.4 ...

  5. 关于移动端swiper的2种样式重置

    手机查看效果地址:猛戳 ,PC端查看可以缩放浏览器窗口看效果~~ 思路:主要考虑选择器优先级大于默认就可以随意撸码 注意:该demo里用的mobile-adaptive.js是让页面以rem自适应,也 ...

  6. ReactNative新手学习之路04 组件化开发轮播图swiper支持安卓和IOS

    react native 新手之路04 组件化开发轮播图swiper支持安卓和IOS npm install react-native-carousel --save git 地址Properties ...

  7. swiper框架,实现轮播图等滑动效果

    http://www.swiper.com.cn/ 做个记录而已,这个没什么好说的,对于需要手机端开发实现触摸等方式可以看看.

  8. swiper.animate~之~可以执行两种动画的升级版的Swiper Animate

        1.下载插件swiper.animate-twice.min.js,加载进页面. <!DOCTYPE html> <html> <head> ... < ...

  9. swiper横向轮播--3d

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

随机推荐

  1. Mybatis 操作数据库的主键自增长

    本篇文章将研究mybatis 实现oracle主键自增的机制 首先我们看对于同一张student表,对于mysql,sql server,oracle中它们都是怎样创建主键的 在mysql中 crea ...

  2. Html+js 控制input输入框提示

    <input type="text" class="fl plsearch_txt" id="key" value="请输入 ...

  3. 【HDU 4940】Destroy Transportation system(无源无汇带上下界可行流)

    Description Tom is a commander, his task is destroying his enemy’s transportation system. Let’s repr ...

  4. Django入门之自定义页面

    1.创建项目,创建app django-admin.py startproject HelloWord python3 manage.py startapp sync_one #第二步需要进入Hell ...

  5. Scala 递归学习的例子

    为了学习Spark,我开始了学习Scala.加油! 递归的一个题目: 代码: // Why x is Float, but when we use 3.0 for example, it return ...

  6. codeforces 723B:Text Document Analysis

    Description Modern text editors usually show some information regarding the document being edited. F ...

  7. SQLServer2012自增列值跳跃的问题

    2012引入的新特性,重启之后会出现值跳跃的问题,如: 解决的方案: 1.使用序列(Sequence),2012引入的和Oracle一样的特性. 2.更改SQLServer启动服务的启动参数,增加[- ...

  8. bzoj4318OSU &tyvj1952 Easy

    之前做tyvj1952Easy(给定一个序列,每个位置有一定的概率是1或0,求极长连续1的长度平方期望),用的做法是求出"全1子串的期望个数".假如每一段极长连续1分别长x1,x2 ...

  9. rfc2616 HTTP Protocl Analysis

    catalog . Introduction . Protocol Parameters . HTTP Message . Request . Response . HTTP Method.Conte ...

  10. 在c#中用指针操作图片像素点

    在Bitmap类中有两个函数SetPixel,GetPixel,分别用来设置或读取图片中指定点的颜色(这里发现了VS的一个错误,SetPixel的文档说明写的是“获取颜色”??). 当要对一幅图进行相 ...