Seeking assistance in creating a LOGO slider that seamlessly transitions at the end. I have resorted to duplicating a section to ensure continuous movement.
I opted for using the translateX value for the animation effect.
.box {
width: 600px;
//overflow: hidden;
margin: 100px auto;
position: relative;
background: white;
height: 100px;
padding: 20px;
}
.lst-box {
//white-space: nowrap;
animation: loop 6s linear infinite;
position: absolute;
width: 2500px;
left: 0;
}
.lst-box li {
display: inline-block;
width: 49%;
float: left;
}
.lst-box li .item {
width: 200px;
height: 100px;
background: tomato;
line-height: 100px;
text-align: center;
font-size: 50px;
color: white;
display: inline-block;
}
@keyframes loop {
0% {
left: 0;
}
100% {
left: -200%;
}
}
.lst-box li:nth-child(2) .item {
background: green;
}<div class="box">
<ul class="lst-box">
<li>
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</li>
<li>
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</li>
</ul>
</div>https://jsfiddle.net/vg7c5aan/1/
Appreciate your help