swiper2兼容ie8浏览器问题

最新推荐文章于 2021-03-29 10:47:20 发布

小丸子yeah~

最新推荐文章于 2021-03-29 10:47:20 发布

阅读量662

点赞数

分类专栏： H5 文章标签： H5

本文链接：https://blog.csdn.net/Blablabla_/article/details/102626724

版权

H5 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

目前swiper2的版本才兼容ie8

1.分页按钮问题：

<div class="swiper-container" style="height: 545px">
 <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img src="img/banner1.png" class="headPic" />
    </div>
    <div class="swiper-slide">
      <img src="img/banner2.png" class="headPic" />
    </div>
    <div class="swiper-slide">
      <img src="img/banner3.png" class="headPic" />
    </div>
  </div>
</div>
<div class="pagination"></div>

其中分页按钮要自己定义，与swiper-container同级

2.上下页按钮：

js：

var mySwiper = new Swiper(".swiper-container1", {
  slidesPerView: 2,//一个slide显示两个图片
  slidesPerGroup: 2,//一共两组
  onInit: function(swiper) {
    swiper.swipeNext();
  }
});
$("#btn1").click(function() {
  mySwiper.swipePrev();//上一页
});
$("#btn2").click(function() {
  mySwiper.swipeNext();//下一页
});

html:

<div class="swiper1">
<div class="swiper-container1">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img src="img/jiudian.png" class="headPic" />
    </div>
    <div class="swiper-slide">
      <img src="img/jiudian1.png" class="headPic" />
    </div>
    <div class="swiper-slide">
      <img src="img/jiudian2.png" class="headPic" />
    </div>
    <div class="swiper-slide">
      <img src="img/jiudian3.png" class="headPic" />
    </div>
  </div>
</div>
<div id="btn1" class="btn"><img src="img/left1.png" /></div>
<div id="btn2" class="btn"><img src="img/right1.png" /></div>
</div>

上下页的btn按钮也要自己定义