JSFiddle - React, Tailwind, and code Playground
HTML
<div class="slide-title">
<span>title1</span>
<span>title2</span>
<span>title3</span>
</div>
<div class="slide-container">
<ul class="slide-list js-slide-list">
<li class="odd"><span>item1</span><span>item1</span><span>item1</span></li>
<li class="even"><span>item2</span><span>item2</span><span>item2</span></li>
<li class="odd"><span>item3</span><span>item3</span><span>item3</span></li>
<li class="even"><span>item4</span><span>item4</span><span>item4</span></li>
</ul>
</div>
CSS
.slide-title{
background: rgba(0,0,0,.5);
color: #fff;
height: 34px;
line-height: 34px;
padding: 0 10px;
font-size: 12px;
font-weight: bold;
}
.slide-title span{
float: left;
margin-right: 14px;
}
.slide-title span:nth-child(1),
.slide-list li span:nth-child(1){
width: 60px;
}
.slide-title span:nth-child(2),
.slide-list li span:nth-child(2){
width: 90px;
}
.slide-title span:nth-child(3),
.slide-list li span:nth-child(3){
width: 90px;
margin-right: 0px;
}
.slide-container{
position: relative;
overflow: hidden;
height: 90px;
}
.slide-list{
position:absolute;
width:100%;
left:0;
top:0;
color:#000;
margin:0;
padding:0;
}
.slide-list li {
height:30px;
line-height:30px;
list-style:none;
margin:0;
padding:0 10px;
}
.slide-list li span {
display:inline-block;
margin-right:14px;
font-size:12px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.slide-list li.odd{
background: rgba(51,79,109,.3);
}
.slide-list li.even{
background: rgba(51,79,109,.1);
}
JavaScript
var doscroll = function(){
var $parent = $('.js-slide-list');
var $first = $parent.find('li:first');
var height = $first.height();
$first.animate({
marginTop: -height + 'px'
}, 500, function() {
$first.css('marginTop', 0).appendTo($parent);
});
};
setInterval(function(){doscroll()}, 2000);