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. myeclipse 10怎么安装与激活

    http://jingyan.baidu.com/article/5553fa82eae0ce65a2393406.html

  2. Failed to load the JNI library "E:\JDK6.0\bin\client\jvm.dll"

    在打开Eclipse是错误提示:Failed to load the JNI library "E:\JDK6.0\bin\client\jvm.dll" 如图1所示 图1 遇到这 ...

  3. ZooKeeper对比Eureka

    刚开始看到Eureka这个单词的时候真心不会念,查了后发现他有一个好听的名字,来,大家一起念 [ jʊ'rikə ] 简介 Eureka本身是Netflix开源的一款提供服务注册和发现的产品,并且提供 ...

  4. python 控制台颜色

    python_控制台输出带颜色的文字方法   控制台输出带颜色的文字方法: 在python开发的过程中,经常会遇到需要打印各种信息.海量的信息堆砌在控制台中,就会导致信息都混在一起,降低了重要信息的可 ...

  5. Linux安装JDK步骤

    Linux安装JDK步骤 1.先从官网下载JDK安装包,我下载的是:jdk-8u131-linux-x64.tar.gz版本 2.在usr下创建java文件夹 # mkdir /usr/java 3. ...

  6. sed进阶N;P;D

    案例 sed 的高级替换 $cat file1 why:1 why:2 3 4 5 why:6 why:7 8 why:9 $cat file2 why:1 why:2 3 4 5 why:6 why ...

  7. 【转】awk用法介绍

    1. 介绍 Awk是由Aho.Weinberger和Kernighan三位科学家开发的,特别擅长文本处理的linux 工具,该工具是 linux 下最常用的工具之一.Awk不是普通的工具,其实,也是一 ...

  8. java根据模板导出pdf

    在网上看了一些Java生成pdf文件的,写的有点乱,有的不支持写入中文字体,有的不支持模板,有的只是随便把数据放里面生成文件,完全不考虑数据怎样放置的以及以后的维护性,想想还是自己总结一个完全版的导出 ...

  9. chrome disable-web-security 关闭安全策略 解决跨域

    Chrome 跨域访问线上接口 时间:2016-04-21 作者:zhongxia 前后端分离之后,联调的时候就会出现问题,那就是Ajax跨域问题. 跨域问题的解决方案有很多种比如常规的 后端使用CR ...

  10. jquery 中json数组的操作 增删改

    1.数组的创建 var arrayObj = new Array(); //创建一个数组 var arrayObj = new Array([size]); //创建一个数组并指定长度,注意不是上限, ...