html部分
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
</div>
</div>
js部分
<script>
var swiperV = new Swiper('.swiper-container', {
effect: 'cube',
direction: 'vertical',
// spaceBetween: 50,
pagination: {
el: '.swiper-pagination',
clickable: true,
}
});
</script>
常见问题：
（1）如果轮播时 需要跳转页面 苹果手机微信浏览器会在底部出现横条前进后退 这样轮播图就会显示不完整而且容易崩 所以加上：
<script>
$("body").css("height",document.body.clientHeight+"px"); //让页面完整显示
var swiperV = new Swiper('.swiper-container', {
effect: 'cube',
direction: 'vertical',
// spaceBetween: 50,
pagination: {
el: '.swiper-pagination',
clickable: true,
}
});
</script>
（2）如果轮播图上有一些input或者select标签，当没填完就滑动时手机的键盘不会消失，解决方法：
<script>
var swiperV = new Swiper('.swiper-container', {
effect: 'cube',
direction: 'vertical',
// spaceBetween: 50,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
on: { //滑动时让input或者select标签失去焦点
touchMove: function(event) {
$('input').blur();
$('select').blur();
},
},
});
</script>
