如何创建水平无限滑动图像库？

Question

我想创建一个图像库，它继续滑动到屏幕的左侧。将上传许多图像，这些图像必须自动设置在水平砖石中，这一切都必须自动水平滑动。

这张图片可以让我知道我到底想要什么。

我搜索了很多，但我没有接近它。这就是为什么我甚至无法创建一个JSfiddle。它甚至可能吗？

请帮助

Answer 1

对于一个创业公司，这可能会帮助你，虽然你想要几个图像拇指排成一行并向左滑动，当前演示有单个图像，但你可以将每个图像视为一个容器并使用背后的想法，以了解如何它发生在CSS Only有一个很好的article关于它和一个codepen。它仅使用CSS来创建无限滑动图库。还有其他一些使用javascript以及css的选项也是您的选择，请参阅此处进行演示。

.tech-slideshow {
  height: 200px;
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.tech-slideshow>div {
  height: 200px;
  width: 2526px;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/collage.jpg);
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  transform: translate3d(0, 0, 0);
}

.tech-slideshow .mover-1 {
  animation: moveSlideshow 12s linear infinite;
}

.tech-slideshow .mover-2 {
  opacity: 0;
  transition: opacity 0.5s ease-out;
  background-position: 0 -200px;
  animation: moveSlideshow 15s linear infinite;
}

.tech-slideshow:hover .mover-2 {
  opacity: 1;
}

@keyframes moveSlideshow {
  100% {
    transform: translateX(-66.6666%);
  }
}

<div class="tech-slideshow">
  <div class="mover-1"></div>
  <div class="mover-2"></div>
</div>