Looking for a solution to the carousel jerk issue when it reaches the end of the loop? Is there a way to seamlessly loop start without any noticeable interruptions? Here is the code in question. Avoiding the use of JavaScript, is there a method to achieve this effect without making changes based on screen size but ensuring that .marquee-item remains at 580px?
.marquee-wrapper{
background:#2F394C;
text-align:center;
}
.marquee-wrapper .container{
overflow:hidden;
}
.marquee-inner span{
display:flex;
gap:40px;
}
.marquee-wrapper .marquee-block{
--total-marquee-items:5;
height: 150px;
width: calc(30% * (var(--total-marquee-items)));
overflow: hidden;
box-sizing: border-box;
position: relative;
margin: 20px auto;
background:#1B2531;
padding: 30px 0;
}
.marquee-inner{
display: flex;
width: 200%;
position: absolute;
}
.marquee-item{
width: 580px;
height: auto;
float: left;
transition: all .2s ease-out;
background:#00cc00;
}
.marquee-item:last-child {
margin: 0 50px 0 20px;
}
.marquee-inner p{
font-weight: 800;
font-size: 30px;
font-family: cursive;
}
.marquee-inner.to-left{
animation: marqueeLeft 5s linear infinite;
}
.marquee-inner.to-right{
animation: marqueeRight 5s linear infinite;
}
@keyframes marqueeLeft{
0% {
left: 0;
}
100% {
left: -100%;
}
}
@keyframes marqueeRight{
0% {
left: -100%;
}
100% {
left: 0;
}
}<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CSS Carousel</title>
</head>
<body>
<div class="marquee-wrapper">
<div class="container">
<div class="marquee-block">
<div class="marquee-inner to-left">
<span>
<div class="marquee-item">
<p class="text-white">1</p>
</div>
<div class="marquee-item">
<p class="text-white">2</p>
</div>
<div class="marquee-item">
<p class="text-white">3</p>
</div>
<div class="marquee-item">
<p class="text-white">4</p>
</div>
<div class="marquee-item">
<p class="text-white">5</p>
</div>
</span>
<span>
<div class="marquee-item">
<p class="text-white">1</p>
</div>
<div class="marquee-item">
<p class="text-white">2</p>
</div>
<div class="marquee-item">
<p class="text-white">3</p>
</div>
<div class="marquee-item">
<p class="text-white">4</p>
</div>
<div class="marquee-item">
<p class="text-white">5</p>
</div>
</span>
</div>
</div>
<div class="marquee-block">
<div class="marquee-inner to-right">
<span>
<div class="marquee-item">
<p class="text-white">5</p>
</div>
<div class="marquee-item">
<p class="text-white">4</p>
</div>
<div class="marquee-item">
<p class="text-white">3</p>
</div>
<div class="marquee-item">
<p class="text-white">2</p>
</div>
<div class="marquee-item">
<p class="text-white">1</p>
</div>
</span>
<span>
<div class="marquee-item">
<p class="text-white">5</p>
</div>
<div class="marquee-item">
<p class="text-white">4</p>
</div>
<div class="marquee-item">
<p class="text-white">3</p>
</div>
<div class="marquee-item">
<p class="text-white">2</p>
</div>
<div class="marquee-item">
<p class="text-white">1</p>
</div>
</span>
</div>
</div>
</div>
</div>
</body>
</html>