IE兼容swiper
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的更多相关文章
- Swiper说明&&API手册 【中文手册Swiper】
原文地址:http://www.cnblogs.com/scavengers/p/3760449.html 示例: <link rel="stylesheet" href= ...
- Swiper 中文API手册(share)
本文分享自 http://www.cnblogs.com/scavengers/p/3760449.html ---------------------------华丽的分割线------------ ...
- Swiper.js 中文API手册
本文分享自 http://www.cnblogs.com/scavengers/p/3760449.html ---------------------------华丽的分割线------------ ...
- Swiper说明&&API手册
最近使用Swipe.js,发现中文的资料很少,试着翻译了一下.能力有限,翻译难免错漏,欢迎指出,多谢! 翻译自:http://www.idangero.us/sliders/swiper/api.ph ...
- Swiper说明及API手册说明
最近使用Swipe.js,发现中文的资料很少,试着翻译了一下.能力有限,翻译难免错漏,欢迎指出,多谢! 翻译自:http://www.idangero.us/sliders/swiper/api.ph ...
- Swiper API
本文分享自 http://www.cnblogs.com/scavengers/p/3760449.html 最近使用Swipe.js,发现中文的资料很少,试着翻译了一下.能力有限,翻译难免错漏,欢迎 ...
- Swiper Usage&&API
最近使用Swipe.js,发现中文的资料很少,试着翻译了一下.能力有限,翻译难免错漏,请指出,多谢!如果想获得国外较多而全的文档,还是用google. 一了解SwiperSwiper 是一款免费以及轻 ...
- idangerous swiper
最近使用Swipe.js,发现中文的资料很少,试着翻译了一下.能力有限,翻译难免错漏,欢迎指出,多谢! 翻译自:http://www.idangero.us/sliders/swiper/api.ph ...
- swiper横向轮播(兼容IE8)
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
随机推荐
- myeclipse 10怎么安装与激活
http://jingyan.baidu.com/article/5553fa82eae0ce65a2393406.html
- 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 遇到这 ...
- ZooKeeper对比Eureka
刚开始看到Eureka这个单词的时候真心不会念,查了后发现他有一个好听的名字,来,大家一起念 [ jʊ'rikə ] 简介 Eureka本身是Netflix开源的一款提供服务注册和发现的产品,并且提供 ...
- python 控制台颜色
python_控制台输出带颜色的文字方法 控制台输出带颜色的文字方法: 在python开发的过程中,经常会遇到需要打印各种信息.海量的信息堆砌在控制台中,就会导致信息都混在一起,降低了重要信息的可 ...
- Linux安装JDK步骤
Linux安装JDK步骤 1.先从官网下载JDK安装包,我下载的是:jdk-8u131-linux-x64.tar.gz版本 2.在usr下创建java文件夹 # mkdir /usr/java 3. ...
- 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 ...
- 【转】awk用法介绍
1. 介绍 Awk是由Aho.Weinberger和Kernighan三位科学家开发的,特别擅长文本处理的linux 工具,该工具是 linux 下最常用的工具之一.Awk不是普通的工具,其实,也是一 ...
- java根据模板导出pdf
在网上看了一些Java生成pdf文件的,写的有点乱,有的不支持写入中文字体,有的不支持模板,有的只是随便把数据放里面生成文件,完全不考虑数据怎样放置的以及以后的维护性,想想还是自己总结一个完全版的导出 ...
- chrome disable-web-security 关闭安全策略 解决跨域
Chrome 跨域访问线上接口 时间:2016-04-21 作者:zhongxia 前后端分离之后,联调的时候就会出现问题,那就是Ajax跨域问题. 跨域问题的解决方案有很多种比如常规的 后端使用CR ...
- jquery 中json数组的操作 增删改
1.数组的创建 var arrayObj = new Array(); //创建一个数组 var arrayObj = new Array([size]); //创建一个数组并指定长度,注意不是上限, ...