html - CSS - 多宽，太宽？ 20000px 的宽度会导致任何网络浏览器/设备出现问题吗？

Question

我想构建一个水平旋转木马。没有图片，只有简单的文字。我想要轮播中的 27 个元素。我正在考虑将它们全部画进去。我希望能够(优雅地)从第 1 项滚动到第 27 项，或者在轮播中的任何其他 2 项之间滚动。

我以前通过动态添加元素来完成这种事情，但那是一个很大的痛苦(在那种情况下我不知道轮播可能有多大，而且我正在处理图像)。

所以我在看类似的东西 -

<ul id="carousel" class="my-carousel" style="transform: translateX(-1000px)">
  <li class="item" style="width: 500px;">
    <h5>item 1</h5>
  </li>
  <li class="item" style="width: 500px;">
    <h5>item 2</h5>
  </li>
  <li class="item" style="width: 500px;">
    <h5>item 3</h5>
  </li>
  ...
  <li class="item" style="width: 500px;">
    <h5>item 27</h5>
  </li>
</ul>

ul.my-carousel {
  list-style: 'none';
  margin: 0;
  padding: 0;
  position: relative;
  transition: transform 200ms ease-in-out;
}
ul.my-carousel li.item {
  display: inline-block;  // or flex maybe
}

我会动态地设置宽度，然后通过调整 ul 元素上的 translateX 属性从一个元素平滑地移动到另一个元素。所以要到达第 10 个元素

document.getElementById('carousel').style.translateX = '-5000px';

这是个坏主意吗？我可能会对某些设备/浏览器造成压力吗？如果我走那么远，他们会把它弄得一团糟吗？

Answer 1

如果您不使用 overflow:hidden 将其包裹起来，您会在页面右侧看到一个滚动条...

所以你需要包装它，那么我认为它可以有多长没有限制。但是请记住，如果你一次加载 27 张图像，加载你的页面需要一些时间......

为什么要构建自己的轮播？你为什么不使用一些现成的和测试过的东西？喜欢https://owlcarousel2.github.io/OwlCarousel2/或者至少把它当作灵感。