我使用 scroll-snap 属性用 CSS 制作了一个滑块。但是我想让我的滑块每隔几秒钟自动滚动一次,但用户也应该能够来回滑动。到目前为止,用户可以来回滚动,但是当我使用@keyframes 添加动画时,当@keyframes 自动向前滚动时,用户无法返回滑块。
我有该项目的现场演示。我删除了自动滚动的@keyframes 动画。目前,它只能在移动设备中通过触摸滚动。或者,您可以使用笔记本电脑的触摸板滚动。
我想要做的是,我需要为我的滑块提供自动滚动功能,但我希望我的用户也能够在滑块中来回移动。感谢您对 Javascript 的任何帮助。(这可能是我将在我的项目中使用的唯一 JS。)
这是现场项目:https ://sametweb.github.io/daimahaberv3/ 我的主滑块是最大图像的滑块,页面上的第二行图像。
我使用了这个@keyframes 动画,但用户无法滚动滑块中的先前项目。
0%,
100% {
transform: translateX(0);
}
9% {
transform: translateX(0);
}
10% {
transform: translateX(-100%);
}
19% {
transform: translateX(-100%);
}
20% {
transform: translateX(-200%);
}
29% {
transform: translateX(-200%);
}
30% {
transform: translateX(-300%);
}
39% {
transform: translateX(-300%);
}
40% {
transform: translateX(-400%);
}
49% {
transform: translateX(-400%);
}
50% {
transform: translateX(-500%);
}
59% {
transform: translateX(-500%);
}
60% {
transform: translateX(-600%);
}
69% {
transform: translateX(-600%);
}
70% {
transform: translateX(-700%);
}
79% {
transform: translateX(-700%);
}
80% {
transform: translateX(-800%);
}
89% {
transform: translateX(-800%);
}
90% {
transform: translateX(-900%);
}
99% {
transform: translateX(-900%);
}
}
我的滑块容器和滑块项 CSS:
.main-slider {
.flex();
overflow: -moz-scrollbars-none;
-ms-overflow-style: none;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
height: 100%;
padding: 0 0 3rem 0;
&::-webkit-scrollbar {
width: 0 !important;
}
.item {
position: relative;
display: inline-block;
flex: 0 0 85%;
margin: 0 2rem 0 0;
scroll-snap-align: center;
scroll-behavior: smooth;
}
}
我需要一个解决方案,要么解决@keyframes 滑动先前项目的问题,要么使用 Javascript 添加自动滚动行为。