swiper.js实现名录上下滚动

实现效果如下：

       
 
 
 
  
 
王启龙1
 
深圳市港龙混南通有限公司
 
董事长
  
 
 
  
 
王启龙2
 
深圳市港龙混南通有限公司
 
董事长
  
 
 
 
 
 var mySwiper = new Swiper(\'.swiper\', { direction: \'vertical\', // 垂直切换选项 loop: true, // 循环模式选项 loopPreventsSlide: true,//当swiper 正在过渡时，阻止slide 前进后退的切换操作 observer: true, observeParents: true, slidesPerView: 10, //swiper容器同时展示的元素数量 spaceBetween: 0, //元素之间间隔距离 speed: 2000, //slider自动滑动开始到结束的时间 autoplay: {//开启自动切换 delay: 0,//自动切换的时间间隔 stopOnLastSlide: false,//当切换到最后一个slide时停止自动切换 disableOnInteraction: false,//用户操作swiper之后，是否停止自动切换效果 }, }) 

*{ margin: 0; padding: 0; box-sizing: border-box; font-size: 14px;}a { color: #000; text-decoration: none; display: inline-block;}ul{ list-style: none;}ul li{ list-style: none;}body{ background: #fff; background-image:url(\'../img/bg.png\'); background-size: 100%; background-repeat: no-repeat;}.container{ width: 1200px; margin: 0 auto; margin-top: 220px; padding-bottom: 50px; overflow: hidden; height:500px;}.swiper{ height: 300px; border: 1px solid #ccc; overflow: hidden;}.list-wrapper{ height: 100%; }.list-inner{ border-bottom: 1px solid #ccc; clear: both; height: 30px; line-height:30px; display: block; color: #fff; font-size: 16px; }.list-inner .name{ float: left; width: 150px; border-right: 1px solid #fff; padding-left: 10px;}.list-inner .company{ width:auto; float: left; padding: 0px 10px; }.list-inner .job{ float: right; width: 150px; border-left: 1px solid #fff; padding: 0px 10px;}.swiper-wrapper { transition-timing-function:linear !important; -webkit-transition-timing-function: linear !important; -moz-transition-timing-function: linear !important; -ms-transition-timing-function: linear !important; -o-transition-timing-function: linear !important; transition-timing-function: linear !important; }