最近项目一些网站项目想到用Swiper3来制作响应式,但是发现IE9都不兼容, 而swiper2版本又少一个breakpoints参数 做响应式脚本非常不方便,于是想到新版的浏览器用3  ,iE9和以下用2

很简单的一个列子就是垂直滑动

区别位置也只有一个

1
2
    mode: 'vertical' //2版本垂直滑动
    direction: 'vertical',//3版本垂直滑动

就是这个! 只要在

var mySwiper = new Swiper('.swiper-container', {

}

里面同时加入这个,然后头部文件,用IE 和非IE 来判断即可。

1
2
3
4
5
6
7
8
<!--[if !IE]><!--> 
<link rel="stylesheet" href="st/css/swiper3.css">
<script src="st/js/swiper3.js"></script>
<!--<![endif]-->
<!--[if IE]>
<link rel="stylesheet" href="st/css/swiper2.css">
<script src="st/js/swiper2.min.js"></script>
<![endif]-->

或者下面这样,上面那个IE8下回出来if什么东西

1
2
3
4
5
6
7
8
<!--[if !IE]><!--> 
<link rel="stylesheet" href="st/css/swiper3.css">
<script src="st/js/swiper3.js"></script>
<!--<![endif]-->
<!--[if IE]>
<link rel="stylesheet" href="st/css/swiper2.css">
<script src="st/js/swiper2.min.js"></script>
<![endif]-->

接下来就是分析css了

1
2
3
4
5
6
7
8
swiper3 的核心文件是
   .wrapper{ 
display: flex;  
  flex-direction: column;//垂直对齐
}
.swiper-slide{
    flex-shrink: 0; //
}

2就没什么好说的了,只要

1
2
3
wrapper{position:relative;}//这个一定要有,就是用top的属性来滚动的,没定位滚动不了
 
好了!就这样吧!上面的引入文件都是官方的文件, 自己去官网下载即可!

Swiper2和Swiper3区别详解与兼容IE8/IE9的更多相关文章

  1. Flex布局新旧混合写法详解(兼容微信)

    原文链接:https://www.usblog.cc/blog/post/justzhl/Flex布局新旧混合写法详解(兼容微信) flex是个非常好用的属性,如果说有什么可以完全代替 float 和 ...

  2. Flex 布局新旧混合写法详解(兼容微信)

    flex 是个非常好用的属性,如果说有什么可以完全代替 float 和 position ,那么肯定是非它莫属了(虽然现在还有很多不支持 flex 的浏览器).然而国内很多浏览器对 flex 的支持都 ...

  3. 基于Java的打包jar、war、ear包的作用与区别详解

      本篇文章,小编为大家介绍,基于Java的打包jar.war.ear包的作用与区别详解.需要的朋友参考下   以最终客户的角度来看,JAR文件就是一种封装,他们不需要知道jar文件中有多少个.cla ...

  4. Android中Intent传值与Bundle传值的区别详解

    Android中Intent传值与Bundle传值的区别详解 举个例子我现在要从A界面跳转到B界面或者C界面   这样的话 我就需要写2个Intent如果你还要涉及的传值的话 你的Intent就要写两 ...

  5. php 去除html标记--strip_tags与htmlspecialchars的区别详解

    php 去除html标记--strip_tags与htmlspecialchars的区别详解 作者: 字体:[增加 减小] 类型:转载 时间:2013-06-26   本篇文章是对php中去除html ...

  6. HTTP POST GET 本质区别详解

    HTTP POST GET 本质区别详解 一 原理区别 一般在浏览器中输入网址访问资源都是通过GET方式:在FORM提交中,可以通过Method指定提交方式为GET或者POST,默认为GET提交 Ht ...

  7. javascript中=、==、===区别详解

    javascript中=.==.===区别详解今天在项目开发过中发现在一个小问题.在判断n==""结果当n=0时 n==""结果也返回了true.虽然是个小问题 ...

  8. [转]ESCAPE()、ENCODEURI()、ENCODEURICOMPONENT()区别详解

    escape().encodeURI().encodeURIComponent()区别详解 JavaScript中有三个可以对字符串编码的函数,分别是: escape,encodeURI,encode ...

  9. phpcms加载系统类与加载应用类之区别详解

    <?php 1. 加载系统类方法load_sys_class($classname, $path = ''", $initialize = 1)系统类文件所在的文件路径:/phpcms ...

随机推荐

  1. 廖雪峰JavaScript练习题2

    请把用户输入的不规范的英文名字,变为首字母大写,其他小写的规范名字.输入:['adam', 'LISA', 'barT'],输出:['Adam', 'Lisa', 'Bart'] 肯定有更简单的方法, ...

  2. Android ListView复制、删除的实现

    适配器MyAdapter: package com.zihao.adapter; import java.util.List; import com.zihao.popdemo.R; import c ...

  3. 微信小程序开发前期准备

    开发文档 官方开发文档 开发IDE 官方工具下载 UI组件 WeUI:是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,新手建议使用: ZanUI-WeAp ...

  4. idea打jar包

    昨天碰到个问题:使用idea打成jar包,但是在测试环境一直报错.参考: http://blog.csdn.net/aotian16/article/details/52198378 之后发现原来的j ...

  5. Gitlab命令行简单使用

    使用Gitlab拉取远程文件到本地,然后再创建新分支的流程: git clone url   #将远程分支拉取到本地: git status / git branch #查看git的状态和分支情况,g ...

  6. Python unittest模块心得(一)

    关于unittest模块的一些心得,主要是看官网的例子,加上一点自己的理解,官网地址:https://docs.python.org/3.6/library/unittest.html 基础概念介绍: ...

  7. mongodb数据库集合操作

    1:更新update update() 方法用于更新已存在的文档.语法格式如下: db.collection.update( <query>, <update>, { upse ...

  8. IIS7下设置上传大小的限制

    一.找到修改大小的配置文件和配置节点 打开你系统盘(我是C盘),找到 C:\Windows\System32\inetsrv\config\schema目录,该目录下有一个IIS_schema.xml ...

  9. 页面引入(include)方式的研究及性能比较

    1. 应用Html中的框架(iframe) 目前大多数门户网站都应用iframe来进行页面上广告的投放,就是将不同的广告分别应用iframe投放到主页面上,优点是效率高,互不影响,缺点是不符合网页标准 ...

  10. 【Leetcode】【Medium】Best Time to Buy and Sell Stock

    Say you have an array for which the ith element is the price of a given stock on day i. If you were ...