zoukankan      html  css  js  c++  java
  • Swiper2和Swiper3区别详解与兼容IE8/IE9

      最近项目一些网站项目想到用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的属性来滚动的,没定位滚动不了
     
    好了!就这样吧!上面的引入文件都是官方的文件, 自己去官网下载即可!
  • 相关阅读:
    压缩感知理论模型
    欢迎使用CSDN-markdown编辑器
    CEF3 概览及一般使用方法
    如何利用CEF3创建一个简单的应用程序 (Windows Platform)
    递归(浅解)
    day22 ftp传输作业未完成
    day21(套接字初应用)
    Multiprocess.Process(源码)
    day20 网络编程(初识)
    day19(异常补遗)
  • 原文地址:https://www.cnblogs.com/liyanyu520/p/9590061.html
Copyright © 2011-2022 走看看