https://segmentfault.com/q/1010000005605451/a-1020000009012368/revision
HTML:
<div class="swiper-container swiper-container-v">
<div class="swiper-wrapper">
<div class="swiper-slide">Vertical Slide 1</div>
<div class="swiper-slide">
<div class="swiper-container swiper-container-scrollbar">
<div class="swiper-wrapper">
<div class="swiper-slide">
<h3>title</h3>
<p>this is a p tag</p>
.....
.....
.....
</div>
</div>
<div class="swiper-scrollbar"></div>
</div>
</div>
<div class="swiper-slide">Vertical Slide 3</div>
<div class="swiper-slide">Vertical Slide 4</div>
</div>
</div>
CSS:
html, body{
height: 100%;
}
.swiper-container{
width: 100%;
height: 100%;
}
.swiper-container-scrollbar .swiper-slide{
height: auto;
}
JavaScript:
var swiperV = new Swiper('.swiper-container-v', {
direction: 'vertical'
});
var swiperScrollbar = new Swiper('.swiper-container-scrollbar', {
scrollbar: '.swiper-container-scrollbar .swiper-scrollbar',
direction: 'vertical',
slidesPerView: 'auto',
mousewheelControl: true,
freeMode: true,
nested: true
});
本文转自Ansue 51CTO博客,原文链接:http://blog.51cto.com/ansue/1944751,如需转载请自行联系原作者