上下滑動的swiper,第二個slider高度大於屏幕,如何讓它出現滾動條,像單頁面那樣滑動??

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
});


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章