如何解决双向无限图像滑块
我希望在相反方向上无限滚动。我已经成功地制作了一个,但另一个有一些小故障,因为它在顶部显示额外的空白并且不能正确滚动。我曾尝试更改 css 动画,但无法做到。请参考下面的代码。
@-webkit-keyframes scroll {
0% {
transform: translateY(0);
}
100% {
transform: translateY(calc(-50vh * 3));
}
}
@keyframes scroll {
0% {
transform: translateY(0);
}
100% {
transform: translateY(calc(-50vh * 3));
}
}
@-webkit-keyframes rev-scroll {
0% {
transform: translateY(0);
}
100% {
transform: translateY(calc(100vh * 3));
}
}
@keyframes rev-scroll {
0% {
transform: translateY(0);
}
100% {
transform: translateY(calc(100vh * 3));
}
}
.sliderr {
background: white;
Box-shadow: 0 10px 20px -5px rgba(0,0.125);
height: 100vh;
/* margin: auto; */
overflow: hidden;
position: relative;
width: 30vw;
padding: 0 !important;
}
.sliderr::before,.sliderr::after {
background: linear-gradient(to top,rgba(0,1) 0%,rgba(255,255,0) 100%);
content: "";
height: 25vh;
position: absolute;
width: 30vw;
z-index: 2;
}
.sliderr::after {
/* right: 0; */
top: 0;
left: 0;
transform: rotateZ(180deg);
}
.sliderr::before {
left: 0;
bottom: 0;
}
.sliderr .slide-track {
-webkit-animation: scroll 40s linear infinite;
animation: scroll 5s linear infinite;
display: flex;
flex-direction: column;
height: calc(50vh * 6);
}
.sliderr .slide {
height: 50vh;
width: 30vw;
}
.sliderr .slide img{
height: 50vh;
width: 30vw;
object-fit: cover;
}
.sliderr .slide-track-rev {
-webkit-animation: rev-scroll 40s linear infinite;
animation: rev-scroll 5s linear infinite;
display: flex;
flex-direction: column;
height: calc(50vh * 6);
}
<div class="sliderr">
<div class="slide-track">
<div class="slide">
<img src="https://picsum.photos/300/300?random=1" height="100" width="250" alt="" />
</div>
<div class="slide">
<img src="https://picsum.photos/300/300?random=2" height="100" width="250" alt="" />
</div>
<div class="slide">
<img src="https://picsum.photos/300/300?random=3" height="100" width="250" alt="" />
</div>
<div class="slide">
<img src="https://picsum.photos/300/300?random=1" height="100" width="250" alt="" />
</div>
<div class="slide">
<img src="https://picsum.photos/300/300?random=2" height="100" width="250" alt="" />
</div>
<div class="slide">
<img src="https://picsum.photos/300/300?random=3" height="100" width="250" alt="" />
</div>
</div>
</div>
<div class="sliderr">
<div class="slide-track-rev">
<div class="slide">
<img src="https://picsum.photos/300/300?random=1" height="100" width="250" alt="" />
</div>
<div class="slide">
<img src="https://picsum.photos/300/300?random=2" height="100" width="250" alt="" />
</div>
<div class="slide">
<img src="https://picsum.photos/300/300?random=3" height="100" width="250" alt="" />
</div>
<div class="slide">
<img src="https://picsum.photos/300/300?random=1" height="100" width="250" alt="" />
</div>
<div class="slide">
<img src="https://picsum.photos/300/300?random=2" height="100" width="250" alt="" />
</div>
<div class="slide">
<img src="https://picsum.photos/300/300?random=3" height="100" width="250" alt="" />
</div>
</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。