swiper官网：http://www.swiper.com.cn/
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>无标题文档</title>
<script>
(function(doc, win) {
var docEl = doc.documentElement,
recalc = function() {
var clientWidth = docEl.clientWidth;
if(!clientWidth) {
return
}
var w = 20 * (clientWidth / 375);
if(w > 40) {
w = 40
}
docEl.style.fontSize = w + "px"
};
if(!doc.addEventListener) {
return
}
if("orientationchange" in window) {
win.addEventListener("orientationchange", recalc, false)
}
win.addEventListener("resize", recalc, false);
win.addEventListener("load", recalc, false);
doc.addEventListener("DOMContentLoaded", recalc, false);
recalc()
})(document, window);
</script>
<link href="../css/pages/style.css" rel="stylesheet" type="text/css">
<script src="https://img.dianzhangzhipin.com/source/js/jquery-2.1.1.min.js"></script>
<script>
var require = { urlArgs: "v=v1.7" }
</script>
<style type="text/css">
html,
body,
.swiper-container {
height: 100%;
}
.swiper-container2{
height: 10rem;
background-color: pink;
}
</style>
<script src="../js/utils/swiper.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
sssssssssssssssss
<div class="swiper-container2">
<div class="swiper-wrapper">
<div class="swiper-slide">
sssssssssssssssss
</div>
<div class="swiper-slide">
aaa
</div>
<div class="swiper-slide">
bbb
</div>
</div>
</div>
</div>
<div class="swiper-slide">
aaa
</div>
<div class="swiper-slide">
bbb
</div>
</div>
</div>
<script type="text/javascript">
var swiper = new Swiper('.swiper-container', {
direction: 'vertical',
longSwipesRatio: 0.1,
initialSlide: 0,
mousewheelControl: true,
onInit: function(swiper) {
//console.log(swiper.activeIndex);
},
onTransitionEnd: function(swiper) {
},
onTouchStart: function(swiper, e) {
},
onTouchMove: function(swiper, e) {
},
onSlideChangeStart: function(swiper) {
console.log(swiper.activeIndex);
console.log('changestart');
},
onSlideChangeEnd: function(swiper) {
console.log(swiper.activeIndex);
console.log('changeend');
}
});
var swiper2 = new Swiper('.swiper-container2', {
direction: 'horizontal',
longSwipesRatio: 0.1,
initialSlide: 0,
mousewheelControl: true,
onInit: function(swiper) {
//console.log(swiper.activeIndex);
},
onTransitionEnd: function(swiper) {
},
onTouchStart: function(swiper, e) {
},
onTouchMove: function(swiper, e) {
},
onSlideChangeStart: function(swiper) {
console.log(swiper.activeIndex);
console.log('changestart');
},
onSlideChangeEnd: function(swiper) {
console.log(swiper.activeIndex);
console.log('changeend');
}
});
</script>
</body>
</html>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。