导入三个文件

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. To IOC,代码结构演变的随想

    代码结构演变 项目开始阶段 需求: 提供一个系统,可以在新春佳节之际以邮件的形式给员工发送新春祝福. 开发人员: 张三 版本一 string msg = "新年快乐!过节费5000.&quo ...

  2. 关于API认证的问题

    问题:如何保证api安全?-->做api的认证 如下图 整个过程大概就是这样. 好像没什么可以讲的....

  3. Apache Shiro和Spring Security的详细对比

    参考资料: 1)Apache Shiro Apache Shiro:http://shiro.apache.org/ 在Web项目中应用 Apache Shiro:http://www.ibm.com ...

  4. maven-修改本地仓库存放地址

    eclipse中增加maven的插件,maven默认的本地库的路径是 ${user}/.m2/repository/下 一般windows用户的操作系统都安装在C盘 C:\Users\admin\.m ...

  5. java线程安全

    (一).java并发之原子性与可见性 原子性 原子是世界上的最小单位,具有不可分割性.比如 a=0:(a非long和double类型) 这个操作是不可分割的,那么我们说这个操作时原子操作.再比如:a+ ...

  6. 卸载移动硬盘出现 device is busy

    umount /dev/sdb1 # device is busy fuser -m -v /dev/sdb1 # 查看 fuser -m -k /dev/sdb1 # 杀死进程

  7. iOS的nil,Null,NSNull的使用

    今天做项目时,在数组里面取值时,发现里面有NSNull的对象,然后用数组里面对应的对象赋值时出现各种问题,总是报错.后面经过研究和查资料,总算解决了这一问题. nil用来给对象赋值(Objective ...

  8. WebApi支持命名空间重名问题

    using System;using System.Collections.Concurrent;using System.Collections.Generic;using System.Linq; ...

  9. ActiveMQ发消息和收消息

    来自:http://blog.163.com/chengwei_1104/blog/static/53645274201382315625329/ ActiveMQ 是Apache出品,最流行的,能力 ...

  10. Leetcode 300 Longest Increasing Subsequence

    Given an unsorted array of integers, find the length of longest increasing subsequence. For example, ...