Html CSS-多宽，是不是太宽了？20000px的宽度是否会导致任何web浏览器/设备出现问题？

我想建造一个水平旋转木马。没有图像，只有简单的文本。我想在传送带里放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
}

---

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

如果你没有用溢出：隐藏的元素来包装它，你会看到页面右侧有一个滚动条

所以你需要把它包起来，然后我认为它可以有多长没有限制。。但请记住，如果你一次加载27个图像，那么加载页面需要一些时间

---

你为什么要建造自己的旋转木马？你为什么不用现成的、经过测试的东西呢？喜欢或者至少把它当作灵感

谢谢。我不需要太多的功能，所以自己构建它几乎和配置其他人的代码一样快。我也希望我的网页加载快。（最后，您推荐的代码使用jQuery，我正在使用react.js，因此我绝对不想捆绑额外的DOM操纵库）。@AidanEwen好的，那么如果您使用具有溢出：隐藏和宽度：100%的div包装UL，您就可以了：）

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