【发布时间】：2018-06-23 15:31:24
【问题描述】：
我尝试在 HTML/CSS 中制作无限滑块，所以我找到了解决方案。它工作正常，但它不是无限的。我正在使用THIS 解决方案，我只是更改图像的大小。问题出在哪里？只改变大小就不能解决？
我尝试使用其他尺寸的图像，但它不起作用。
谢谢你:-)
@-webkit-keyframes scroll {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
-webkit-transform: translateX(-webkit-calc(-190px *6));
transform: translateX(calc(-190px *6));
}
}
@-moz-keyframes scroll {
0% {
-moz-transform: translateX(0);
transform: translateX(0);
}
100% {
-moz-transform: translateX(-moz-calc(-190px *6));
transform: translateX(calc(-190px *6));
}
}
@-o-keyframes scroll {
0% {
-o-transform: translateX(0);
transform: translateX(0);
}
100% {
-o-transform: translateX(calc(-190px *6));
transform: translateX(calc(-190px *6));
}
}
@keyframes scroll {
0% {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
100% {
-webkit-transform: translateX(-webkit-calc(-190px *6));
-moz-transform: translateX(-moz-calc(-190px *6));
-o-transform: translateX(calc(-190px *6));
transform: translateX(calc(-190px *6));
}
}
.slider {
height: 105px;
margin: auto;
overflow: hidden;
position: relative;
width: 960px;
}
.slider .slide-track {
-webkit-animation: scroll 15s linear infinite;
-moz-animation: scroll 15s linear infinite;
-o-animation: scroll 15s linear infinite;
animation: scroll 15s linear infinite;
display: -webkit-flex;
display: -moz-box;
display: flex;
width: -webkit-calc(190px *6);
width: -moz-calc(190px *6);
width: calc(190px *6);
}
.slider .slide {
height: 105px;
width: 140px;
padding: 0px 25px;
}<div class="slider">
<div class="slide-track">
<div class="slide"><a href="https://www.psimafie.cz/znacka/primordial-pet-food/"><img src="https://www.psimafie.cz/user/documents/upload/gallery/1.png" width="140" height="105" /></a></div>
<div class="slide"><a href="/znacka/orijen/"><img src="https://www.psimafie.cz/user/documents/upload/gallery/2.png" width="140" height="105" /></a></div>
<div class="slide"><a href="/znacka/goodstuff/"><img src="https://www.psimafie.cz/user/documents/upload/gallery/3.png" width="140" height="105" /></a></div>
<div class="slide"><a href="/znacka/taste-of-the-wild/"><img src="https://www.psimafie.cz/user/documents/upload/gallery/4.png" width="140" height="105" /></a></div>
<div class="slide"><a href="/znacka/magnusson/"><img src="https://www.psimafie.cz/user/documents/upload/gallery/5.png" width="140" height="105" /></a></div>
<div class="slide"><a href="/znacka/n-d/"><img src="https://www.psimafie.cz/user/documents/upload/gallery/6.png" width="140" height="105" /></a></div>
<div class="slide"><a href="/znacka/nutra-gold/"><img src="https://www.psimafie.cz/user/documents/upload/gallery/7.png" width="140" height="105" /></a></div>
<div class="slide"><a href="/znacka/essentialfoods/"><img src="https://www.psimafie.cz/user/documents/upload/gallery/8.png" width="140" height="105" /></a></div>
<div class="slide"><a href="/znacka/calibra/"><img src="https://www.psimafie.cz/user/documents/upload/gallery/9.png" width="140" height="105" /></a></div>
<div class="slide"><a href="/znacka/acana/"><img src="https://www.psimafie.cz/user/documents/upload/gallery/10.png" width="140" height="105" /></a></div>
<div class="slide"><a href="/vyhledavani/?string=marp"><img src="https://www.psimafie.cz/user/documents/upload/gallery/11.png" width="140" height="105" /></a></div>
<div class="slide"><a href="/vyhledavani/?string=Brit"><img src="https://www.psimafie.cz/user/documents/upload/gallery/12.png" width="140" height="105" /></a></div>
</div>
</div>【问题讨论】：
-
嗨，我的回答是否成功了，还是有其他问题？请告诉我，以便我为您提供帮助。
-
我用另一种方式解决了这个问题 :-) 但我相信你的解决方案也可以:-)