Question

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

当人滚动容器时，如何使缩略图重复以便没有开头或结尾？

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

Answer 1

这需要一些javascript。我不建议尝试从头开始编写此行为;谷歌infinite scrolling js library，看看你能找到什么。

Answer 2

我怀疑使用纯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/flickity@2.0.5/dist/flickity.css" rel="stylesheet" />
<script src="https://unpkg.com/flickity@2.0.5/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 。

Answer 3

你需要这个无限卷轴的js。以下是您可以从那里下载的6个无限卷轴示例。希望这个链接可以帮助你。

https://www.sitepoint.com/jquery-infinite-scrolling-demos

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

3 个答案: