CSS -多宽，太宽了？20000px的宽度会对任何web浏览器/设备造成问题吗？

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/一样，或者至少把它当作灵感。