swiper2兼容ie8浏览器问题

目前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按钮也要自己定义

发布了26 篇原创文章 · 获赞 6 · 访问量 5092

猜你喜欢

转载自blog.csdn.net/Blablabla_/article/details/102626724