Question

我尝试在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>

Answer 1

好吧，我想我想出了什么问题，您的HTML和CSS很好，除了您需要在HTML中放置所有图像两次的事实。看一下您在问题中链接的代码笔。他们有7张图片，但在HTML中使用了14张图片，您使用了12张，因此在HTML中添加24张图片，如下所示：

<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 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>

不能100％确定这是否是您的问题的答案，但请告诉我是否答案是肯定的。希望这会有所帮助！

如何使滑块无限大？

1 个答案: