对于我的个人作品集，我正在尝试用 CSS 制作一个“无限自动播放滑块”，这是出了名的难（正如其他人告诉我的那样）。
现在，发生的事情是它在滑块到达结束之前重新启动滑块（过早结束） - 而且它也没有无缝回到开始，好像它从未结束（因此名称的无限部分事情）。
这是我编写的仅显示图像的 HTML/React JSX 代码（不包括图像链接数组）：
<div className="pt-28 flex items-center flex-col text-center">
<h1 className="text-4xl pb-12">Infinite slider test</h1>
<div className="slider">
<div className="slide-track">
{cars.map((car, index) => {
return (
<div className="slide" key={index}>
<img src={car} alt="imageforslider" />
</div>
);
})}
</div>
</div>
</div>
这是我目前正在使用的 CSS：
@keyframes scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(calc(-180px * 12));
}
}
.slider {
background: white;
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.125);
height: 100px;
margin: auto;
overflow: hidden;
position: relative;
width: 95%;
}
.slider::before,
.slider::after {
background: linear-gradient(
to right,
rgba(255, 255, 255, 1) 0%,
rgba(255, 255, 255, 0) 100%
);
content: "";
height: 100px;
position: absolute;
width: 200px;
z-index: 2;
}
.slider::after {
right: 0;
top: 0;
transform: rotateZ(180deg);
}
.slider::before {
left: 0;
top: 0;
}
.slider .slide-track {
animation: scroll 40s linear infinite;
display: flex;
width: calc(180px * 24);
}
.slider .slide {
height: 100px;
width: 200px;
}
.slide {
display: grid;
place-content: center;
}
如果您想更好地查看代码，或者想玩弄它 - 这是滑块的 CodeSandbox。看起来很难看，但它是从我原来的项目中删除的——所以应该可以用于测试！
这是链接：https ://codesandbox.io/s/elated-driscoll-d77dcj?file=/src/App.js
提前感谢您的支持！