html - 如何在容器中重复一系列的div？

我在容器中有一系列缩略图。

当人员在容器中滚动时，如何使缩略图重复，所以没有开始或结束？

HTML：

<p>How can you make this repeat</p>

<div class="container">
  <div class="item">
    1
  </div>
  <div class="item">
    2
  </div>
  <div class="item">
    4
  </div>
  <div class="item">
    5
  </div>
  <div class="item">
    6
  </div>
  <div class="item">
    7
  </div>
</div>

CSS：

.container {
  border: 1px solid black;
  display: flex;
  flex-direction: row;
}

.item {
  height: 200px;
  width: 200px;
  background: blue;
  margin: 10px;
  color: white;
  font-size: 20px;
  padding: 10px;
  flex-shrink: 0;
}

Codepen：
http://codepen.io/donpinkus/pen/Zpkrax

最佳答案

我怀疑纯CSS是否可行，但是您可以使用javascript。

如果您愿意使用库，建议您使用Flickity，使用您当前的标记很容易进行设置。



代码段：

var elem = document.querySelector('.container');
var flkty = new Flickity(elem, {
  // options
  cellAlign: 'left',
  wrapAround: true,
  contain: true
});

.container {
  border: 1px solid black;
}
.item {
  height: 200px;
  width: 200px;
  background: blue;
  margin: 10px;
  color: white;
  font-size: 20px;
  padding: 10px;
}

<link href="https://unpkg.com/[email protected]/dist/flickity.css" rel="stylesheet" />
<script src="https://unpkg.com/[email protected]/dist/flickity.pkgd.min.js"></script>
<p>How can you make this repeat</p>

<div class="container">
  <div class="item">
    1
  </div>
  <div class="item">
    2
  </div>
  <div class="item">
    4
  </div>
  <div class="item">
    5
  </div>
  <div class="item">
    6
  </div>
  <div class="item">
    7
  </div>
</div>

确保检查其他类型的许可证here。