* {
padding: 0;
margin: 0;
}
body {
align-items: center;
background: #fff;
display: flex;
height: 100vh;
justify-content: center;
}
.slider {
background: white;
height: 250px;
margin: auto;
overflow: hidden;
position: relative;
width: 1140px;
}
.slider::before, .slider::after {
background: linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%);
content: "";
height: 100%;
position: absolute;
width: 100px;
z-index: 2;
}
.slider::after {
right: 0;
top: 0;
-webkit-transform: rotateZ(180deg);
transform: rotateZ(180deg);
}
.slider::before {
left: 0;
top: 0;
}
.slider .slide-track {
animation: scroll 80s linear infinite;
display: flex;
width: calc(250px * 18);
}
.slider .slide-track:hover {
animation-play-state: paused;
}
.slider .slide {
height: 250px;
width: 250px;
}
.slide:nth-child(1), .slide:nth-child(10) {
background-color: yellow;
}
.slide:nth-child(2), .slide:nth-child(11) {
background-color: coral;
}
.slide:nth-child(3), .slide:nth-child(12) {
background-color: blue;
}
.slide:nth-child(4), .slide:nth-child(13) {
background-color: red;
}
.slide:nth-child(5), .slide:nth-child(14) {
background-color: orange;
}
.slide:nth-child(6), .slide:nth-child(15) {
background-color: purple;
}
.slide:nth-child(7), .slide:nth-child(16) {
background-color: pink;
}
.slide:nth-child(8), .slide:nth-child(17) {
background-color: navy;
}
.slide:nth-child(9), .slide:nth-child(18) {
background-color: lime;
}
@keyframes scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(calc(-250px * 9));
}