div.carousel>div.group>div.card{$}*6
<head>
<style>
.carousel{
margin: 100px auto;
max-width: 1200px;
width: 100%;
display: flex;
overflow-x: auto;
position: relative;
gap:5px;
}
.carousel::before{
content:'';
position:absolute;
left:0;
top:0;
width:10%;
height:100%;
z-index:10;
pointer-events:none;
background: linear-gradient(to right, #fff 0%, rgba(255,255,255,0) 100%);
}
.carousel::after{
content:'';
position:absolute;
right:0;
left:auto;
top:0;
width:10%;
height:100%;
z-index:10;
pointer-events:none;
background: linear-gradient(to left, #fff 0%, rgba(255,255,255,0) 100%);
}
.carousel::-webkit-scrollbar{
display: none;
}
.group{
display: flex;
align-items: center;
justify-content: center;
gap:5px;
animation: spin 8s infinite linear;
}
.card{
width: 200px;
display: flex;
justify-content: center;
align-items: center;
}
img{
width: 100%;
}
@keyframes spin{
from {translate: 0;}
to {translate: -100%}
}
</style>
</head>
<body>
<div class="carousel">
<div class="group">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
<div aria-hidden class="group">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
</div>
</body>
</html>