但是数据太多,单个swiper-slide的内容一屏显示不下,这时,简单的overflow-y:scroll解决不了,因为它肯定要滑动,与swiper的滑动冲突,就要再将swiper-slide里面再套个swiper,并且使用它的滚动条效果了,代码大致如下:
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 });点击查看 swiper单个swiper-slide内容超出滚动效果。