swiper.js实现名录上下滚动
实现效果如下：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/css/swiper.css"><script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/js/swiper.js"></script><link rel="stylesheet" type="text/css" href="./css/style.css"></head><body><div class="container"><div class="swiper"><ul class="list-wrapper swiper-wrapper"><li class="list-content swiper-slide"><div class="list-inner"><div class="name">王启龙1</div><div class="company">深圳市港龙混南通有限公司</div><div class="job">董事长</div></div></li><li class="list-content swiper-slide"><div class="list-inner"><div class="name">王启龙2</div><div class="company">深圳市港龙混南通有限公司</div><div class="job">董事长</div></div></li></ul></div></div>
</body><script>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之后，是否停止自动切换效果},})
</script></html>
*{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;}