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,如需转载请自行联系原作者