导入三个文件

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. 关于 HTTP 请求头的内容

    HTTP(HyperTextTransferProtocol)即超文本传输协议,目前网页传输的的通用协议.HTTP协议采用了请求/响应模型,浏览器或其他客户端发出请求,服务器给与响应.就整个网络资源传 ...

  2. 关于二叉排序树 BST

    #include<stdio.h> #include<stdlib.h> typedef struct node { double w; struct node *l,*r; ...

  3. mac下卸载MySQL

    所有跟mysql相关进程都停止掉, 然后终端输入: cd ~/ sudo rm /usr/local/mysqlsudo rm -rf /usr/local/var/mysqlsudo rm -rf ...

  4. smtplib.SMTPDataError: (554, 'DT:SPM 126 smtp5错误解决办法

    1.自动化测试中,调用邮件模块自动发送邮件时,运行脚本报错: smtplib.SMTPDataError: (554, 'DT:SPM 126 smtp5,jtKowAD3MJz2c1JXLcK2AA ...

  5. 【caffe】create_mnist.sh在windows下的解决方案

    @tags caffe 在windows下使用caffe时,如果先前没有啥经验,会考虑按照官方文档中的例子跑一跑.比如mnist手写数字识别. 然后就会遇到这个问题:windows下怎么执行/exam ...

  6. oracle merge into 的例子

    内容来自 oracle 11g 实用教程 郑阿奇等编 在 oracle 11g中有merge语句,用于根据与原表连接的结果,对目标表执行插入,更新,或者删除操作.例如,根据在一个表中找到的差异在另一个 ...

  7. cmd执行sql文件

    string infile = @"C:\Users\yudm\Desktop\test\Patch.sql"; Process sqlprocess = new Process( ...

  8. Diccuz!NT的dll版本号控制技巧

    dnt每次发布新版本时,公布出来的版本号都是3位数以上,拿3.6.711这个版本号的代码来说,几乎每一个dll上都是统一的版本号命名: 对于一个成熟的产品来说,统一一致的版本号命名有以下的好处: 1. ...

  9. bios中只有windows boot manager下用U盘启动

    在重装系统的时候,很多时候都是先进入bios设置成U盘启动项,然后进行安装,如果年代久远一点的,就设置成光驱启动,再进行:随着时间的推行,光驱已经开始淘汰了,也怀念以前的光驱装机的时光!-:) 开始进 ...

  10. 应用服务器Glassfish任意文件读取漏洞

    catalogue . 前言和技术背景 . Glassfish安装配置 . 漏洞利用 . 漏洞缓解(修复) 1. 前言和技术背景 0x1: GlassFish是什么 GlassFish 是用于构建 J ...