新版开发者工具打开使用swiper插件的h5页面，发现滑动不了，请问要怎么解决，直接去换成旧版本吗？还是有别的方法
代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0'/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">
<style>
*{
margin:0;
padding:0;
}
html,body{
height:100%;
}
body{
font-family:"microsoft yahei";
}
ul{
list-style: none;
}
.swiper-container {
width: 100%;
height: 100%;
background:#fff;
}
.swiper-slide{
width:100%;
height:100%;
background: #fff;
}
</style>
</head>
<body>
<div class="swiper-container" id="swiperContainer">
<div class="swiper-wrapper">
<!-------------slide1----------------->
<section class="swiper-slide" style="background:pink;">
1
</section>
<!---------------slide2-------------->
<section class="swiper-slide" style="background:yellow;">
2
</section>
<!----------------slide3-------------->
<section class="swiper-slide">
3
</section>
<!-------------slide4----------------->
<section class="swiper-slide">
4
</section>
<!-------------slide5----------------->
<section class="swiper-slide">
5
</section>
<!-------------slide6----------------->
<section class="swiper-slide">
6
</section>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="https://image.wxopen.club/content_b148255a-386d-11ea-b7ef-001a7dda7111.png"></script>
<!--<script src="js/swiper.min.js"></script>-->
<script>
var mySwiper = new Swiper ('.swiper-container', {
direction : 'vertical',
on: {
//滑动到最后一个slide触发
reachEnd: function(){
console.log('到了最后一个slide');
},
//判断滑动到了哪一页
slideChangeTransitionEnd: function(){
console.log(this.activeIndex);
if(this.activeIndex == 6){
$('#array').css('display','none');
}else{
$('#array').css('display','block');
}
}
}
})
</script>
</body>
</html>
强力驱动