居中AnythingSlider，两边都有隐藏的溢出

Center AnythingSlider with hidden overflow on both sides

本文关键字：隐藏 溢出 AnythingSlider 居中      更新时间：2023-09-26

我的目标是使滑块宽度为1280px，并位于页面的中心。我希望内容的边缘两边都有隐藏的溢出。例如，我希望内容的中心始终位于页面的中心，在调整浏览器大小时，每一边都被切掉，不显示水平滚动条。

有没有一种简单的方法可以做到这一点？

我最终找到了一个有趣的解决方案，它（至少）在我测试的Chrome、Firefox和Safari中对我有效。它可能有点黑客，但结果很酷。

我做的是：我放了一个宽度为1280px的.wrapper。边距是0 auto，除了左边的边距，这一切都发生在左边。左边距需要设置为div宽度的一半。在这种情况下，这将是640px。但是，因为它必须在左屏幕外溢出，所以必须设置为负数（即-640px）。然后，当屏幕比屏幕大时，为了扭转这种效果，left:50%将其推过了正确的量。显然，为了使margin:0 auto真正工作，必须将position设置为relative（或者absolute，如果您愿意的话）。

.wrapper { width:1280px;
           margin:0 auto 0 -640px; 
           position:relative; 
           left:50% 
         }

唯一的问题
不过我发现了一个问题。因为我们使用的是负边距，所以它会将div向左推到看不到屏幕或浏览器窗口是否太小的位置。如果这是一个问题，并导致它对你不起作用，请告诉我。

添加此css类

  .overflowbothsides{
  vertical-align: middle;
  margin: 0 auto;
  position: relative;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
}

带有代码和示例的解决方案在此处输入链接描述

相关文章：