实现效果如下：
<!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;
}