导入三个文件

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. EditText 几种显示方式,固定行数,自适应行数

    1.显示7行,超过7行自动向下补充行数 <EditText android:id="@+id/edt_content" android:layout_width=" ...

  2. Swift 高阶函数

    map.flatMap.filter和reduce,几乎实现lambda表达式的语言里都会在集合里增加这些方法, 见swift 学习(一)基础知识 (基本数据类型,操作符,流控制,集合)中的集合 ht ...

  3. splay HYSBZ1588

    n天 n个营业额; sum(min(abs(wi-前面))); splay维护一下就可以 #include<stdio.h> #include<algorithm> #incl ...

  4. 51nod 1076强连通

    Tarjan算法来解这题.无向图可以转化为有向图来解决. #include<map> #include<queue> #include<stack> #includ ...

  5. 54B

    The Hedgehog recently remembered one of his favorite childhood activities, - solving puzzles, and go ...

  6. 4位组合型Excel文档密码怎么破解

    现代社会我们会遇到各种密码,很多的密码我们一段时间不用就不知不觉的忘记了.很多的excel用户就遇到过这种情况,这个时候我们就需要一款Excel密码破解工具.Advanced Office Passw ...

  7. DIRECTORY_SEPARATOR:PHP 系统分隔符常量

    今天在nginx部署项目,在浏览器输入http://127.0.0.2/index.php/system/category/?action=list 老是提示error nginx配置没有问题,下了其 ...

  8. 安装完ActivePython后Python的Idle窗口打不开也卸载不掉的解决方法

    1.想找一个好的PythonIDE开发环境所以就安装了ActivePython开发公具,结果发现软件打不开,机器上装的Python环境也不能用了,网上相关的解决方法也是寥寥无几...真悲催! 2.后来 ...

  9. 【BZOJ-2836】魔法树 树链剖分

    2836: 魔法树 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 323  Solved: 129[Submit][Status][Discuss] ...

  10. 【BZOJ-1176&2683】Mokia&简单题 CDQ分治

    1176: [Balkan2007]Mokia Time Limit: 30 Sec  Memory Limit: 162 MBSubmit: 1854  Solved: 821[Submit][St ...