Swiper2兼容IE8

小咪咪 2022-05-21 23:12 314阅读 0赞

习惯性了使用最新的Swiper4，但是最近项目需要兼容IE8就让我很不爽了。还好Swiper2也是很棒的。

官网演示地址：[http://2.swiper.com.cn/demo/][http_2.swiper.com.cn_demo]

刚刚去查看的时候没有发现单独打开的演示按钮，看了源码才知道，自己把路径添加进去就可以看了。

![20180610230233297][]

![20180610230244216][]

单独查看的路径：[http://2.swiper.com.cn/demo/01-default.html][http_2.swiper.com.cn_demo_01-default.html]

<!doctype html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Demo</title>
      <link rel="stylesheet" type="text/css" href="css/idangerous.swiper.css"/>
      <style>
    	/* Demo Syles */
    	body {
    	  margin: 0;
    	  font-family: Arial, Helvetica, sans-serif;
    	  font-size: 13px;
    	  line-height: 1.5;
    	}
    	.device {
    	  width: 640px;
    	  height: 300px;
    	  padding: 30px 40px;
    	  border-radius: 20px;
    	  background: #111;
    	  border: 3px solid white;
    	  margin: 5px auto;
    	  position: relative;
    	  box-shadow: 0px 0px 5px #000;
    	}
    	.device .arrow-left {
    	  background: url(img/arrows.png) no-repeat left top;
    	  position: absolute;
    	  left: 10px;
    	  top: 50%;
    	  margin-top: -15px;
    	  width: 17px;
    	  height: 30px;
    	}
    	.device .arrow-right {
    	  background: url(img/arrows.png) no-repeat left bottom;
    	  position: absolute;
    	  right: 10px;
    	  top: 50%;
    	  margin-top: -15px;
    	  width: 17px;
    	  height: 30px;
    	}
    	.swiper-container {
    	  height: 300px;
    	  width: 640px;
    	}
    	.content-slide {
    	  padding: 20px;
    	  color: #fff;
    	}
    	.title {
    	  font-size: 25px;
    	  margin-bottom: 10px;
    	}
    	.pagination {
    	  position: absolute;
    	  left: 0;
    	  text-align: center;
    	  bottom:5px;
    	  width: 100%;
    	}
    	.swiper-pagination-switch {
    	  display: inline-block;
    	  width: 10px;
    	  height: 10px;
    	  border-radius: 10px;
    	  background: #999;
    	  box-shadow: 0px 1px 2px #555 inset;
    	  margin: 0 3px;
    	  cursor: pointer;
    	}
    	.swiper-active-switch {
    	  background: #fff;
    	}
      </style>
    </head>
    <body>
      <div class="device">
        <a class="arrow-left" href="#"></a> 
        <a class="arrow-right" href="#"></a>
        <div class="swiper-container">
          <div class="swiper-wrapper">
            <div class="swiper-slide"> <img src="img/slider1-1.png"> </div>
            <div class="swiper-slide"> <img src="img/slider1-2.png"> </div>
            <div class="swiper-slide">
              <div class="content-slide">
                <p class="title">Slide with HTML</p>
                <p>You can put any HTML inside of slide with any layout, not only images, even another Swiper!</p>
              </div>
            </div>
          </div>
        </div>
        <div class="pagination"></div>
      </div>
      <script src="js/jquery-1.10.1.min.js" type="text/javascript" charset="utf-8"></script>
      <script src="js/idangerous.swiper.min.js" type="text/javascript" charset="utf-8"></script>
      <script type="text/javascript">
    	  var mySwiper = new Swiper('.swiper-container',{
    	  	autoplay : 2000,
    	    pagination: '.pagination',
    	    loop:true,
    	    grabCursor: true,
    	    paginationClickable: true
    	  })
    	  $('.arrow-left').on('click', function(e){
    	    e.preventDefault();
    	    mySwiper.swipePrev();
    	  })
    	  $('.arrow-right').on('click', function(e){
    	    e.preventDefault();
    	    mySwiper.swipeNext();
    	  })
      </script>
    </body>
    </html>

**您的支持是对我最大的 鼓励。**

**![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70][]**

[http_2.swiper.com.cn_demo]: http://2.swiper.com.cn/demo/
[20180610230233297]: /images/20220522/f3dfad73929748ffa5d487f44f86e3c3.png
[20180610230244216]: /images/20220522/63133503a70f4c339064e8c52df0296e.png
[http_2.swiper.com.cn_demo_01-default.html]: http://2.swiper.com.cn/demo/01-default.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70]: /images/20220522/fdd2b070c2a94f1faa8fcb4df1b009ae.png