swiper3能完美运用在移动端,但是运用在PC端,特别是IE浏览器上不能兼容,没有效果,要使IE兼容Swiper的话必须使用swiper2,也就是idangerous.swiper.js,

下载地址是http://2.swiper.com.cn/download/index.html#file1

但是swiper2的API与swiper3的不同,需要根据swiper2的API来具体运用。

例如分页器,

html

//swiper3

<div class=”swiper-pagination”></div>

//swiper2

<div class=’pagination’></div>

css

//swiper2

<style>

.pagination {

    position: absolute;

    z-index: 20;

    bottom: 10px;

    width: 100%;

    text-align: center;

}

.swiper-pagination-switch
{

    display: inline-block;

    width: 8px;

    height: 8px;

    border-radius: 8px;

    background: #555;

    margin: 0 5px;

    opacity: 0.8;

    border: 1px solid #fff;

    cursor: pointer;

}

.swiper-active-switch
{

    background: #fff;

}

</style>

//swiper3不需要定义css

js

<script>

var swiper= new Swiper(“.swiper-container”,{

//swiper3

pagination:’.swiper-pagination’

//swiper2

pagination:’.pagination’

})

</script>

IE兼容swiper的更多相关文章

  1. Swiper说明&&API手册 【中文手册Swiper】

     原文地址:http://www.cnblogs.com/scavengers/p/3760449.html 示例: <link rel="stylesheet" href= ...

  2. Swiper 中文API手册(share)

    本文分享自 http://www.cnblogs.com/scavengers/p/3760449.html ---------------------------华丽的分割线------------ ...

  3. Swiper.js 中文API手册

    本文分享自 http://www.cnblogs.com/scavengers/p/3760449.html ---------------------------华丽的分割线------------ ...

  4. Swiper说明&&API手册

    最近使用Swipe.js,发现中文的资料很少,试着翻译了一下.能力有限,翻译难免错漏,欢迎指出,多谢! 翻译自:http://www.idangero.us/sliders/swiper/api.ph ...

  5. Swiper说明及API手册说明

    最近使用Swipe.js,发现中文的资料很少,试着翻译了一下.能力有限,翻译难免错漏,欢迎指出,多谢! 翻译自:http://www.idangero.us/sliders/swiper/api.ph ...

  6. Swiper API

    本文分享自 http://www.cnblogs.com/scavengers/p/3760449.html 最近使用Swipe.js,发现中文的资料很少,试着翻译了一下.能力有限,翻译难免错漏,欢迎 ...

  7. Swiper Usage&&API

    最近使用Swipe.js,发现中文的资料很少,试着翻译了一下.能力有限,翻译难免错漏,请指出,多谢!如果想获得国外较多而全的文档,还是用google. 一了解SwiperSwiper 是一款免费以及轻 ...

  8. idangerous swiper

    最近使用Swipe.js,发现中文的资料很少,试着翻译了一下.能力有限,翻译难免错漏,欢迎指出,多谢! 翻译自:http://www.idangero.us/sliders/swiper/api.ph ...

  9. swiper横向轮播(兼容IE8)

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

随机推荐

  1. Spring学习之路三——第一个Spring程序(体会IoC)

    体会IoC:Spring通过一种称作控制反转(IoC)的技术促进了松耦合.当应用了IoC,一个对象依赖的其它对象会通过被动的方式传递进来,而不是这个对象自己创建或者查找依赖对象.你可以认为IoC与JN ...

  2. Linux日志轮循实现(shell)

    在Linux系统中,日志的使用非常频繁,那么对日志就需要一定策略的管理,包括存放目录的设计,log文件命名规则,历史log文件的存放,log目录的容量限制,另外还有日志轮循. 日志轮循就是,将过期的l ...

  3. JS获取父、兄、子节点

    一.jQuery的父节点查找方法 $(selector).parent(selector):获取父节点 $(selector).parentNode:以node[]的形式存放父节点,如果没有父节点,则 ...

  4. Spring怎么引入多个xml配置文件

    方式一:在web.xml中通过<context-param> 标签引入 <context-param> <param-name>contextConfigLocat ...

  5. bootstrap-table 表格加载中....处理

    $('#table').bootstrapTable({data:[]}); $('#table').bootstrapTable("showLoading"); ajax数据加载 ...

  6. Oracle实战笔记(第七天)之PL/SQL进阶

    一.控制结构 控制结构包括:判断语句(条件分支语句).循环语句.顺序控制语句三种. 1.条件分支语句 if--then:简单条件判断 --编写一个过程,可以输入一个雇员名,如果该雇员名的工资低于200 ...

  7. BFC(块级格式上下文)

    BFC的生成 满足下列css声明之一的元素便会生成BFC 根元素 float的值不为none overflow的值不为visible display的值为inline-block.table-cell ...

  8. MyEclipse中设置注释模板的方法

    1.选择菜单Window→Preferences. 2.选择Java→Code style→Code Templates→Commets.选中具体的分类如Methods,点击右侧的Edit可以设置对应 ...

  9. Apache Shiro java安全框架

    什么是Apache Shiro? Apache Shiro(发音为“shee-roh”,日语“堡垒(Castle)”的意思)是一个强大易用的Java安全框架,提供了认证.授权.加密和会话管理功能,可为 ...

  10. 【mac】mac os X更新High Sierra后出现的问题

    今天更新了一下macbook pro的系统到10.13.1版本,出现了几个小问题,总结一下解决方案: git客户端无法使用 解决方案如下: http://blog.csdn.net/kedongjun ...