overflow:hidden 在我的幻灯片项目中不起作用

Question

我正在尝试使用 CSS 动画创建幻灯片应用程序。我有一个带有 class container 的主容器，它包装了我网站上的所有内容。它有两个 div 元素 - 一个用于带有按钮的主页，单击该按钮将带您进入图像幻灯片（第二个 div 元素）。

我正在寻求有关幻灯片本身的帮助（divs class banner 现在设置为 display: none。我为 .slideshow-wrapper 设置了一个动画来改变它的 left 属性所以它里面的图像可以滑动。它们被设置为在 .slideshow-wrapper CSS 规则中 display: flex 和 flex-direct: column 彼此相邻。此外，每个幻灯片包装元素都将宽度和高度设置为视口的 100%。

一切正常，但我不希望幻灯片页面的用户能够在图像之间滚动。当我在 .container 上设置 overflow: hidden 时，它不起作用，我不明白为什么。

另外，当我试图通过在 .slideshow-wrapper 中设置 overflow: hidden 来解决这个问题时，它没有帮助 — 它从第一张图像滑到空白 space。为什么会这样？

这里是 HTML 和 CSS 代码：

.container {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.banner {
  display: none;
}

.slideshow-wrapper {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  display: flex;
  position: absolute;
  left: 0;
  top: 0;
  animation: slideAnim 24s infinite;
}

@keyframes slideAnim {
  0% {
    left: 0
  }
  14% {
    left: 0
  }
  16% {
    left: -100vw
  }
  31% {
    left: -100vw
  }
  33% {
    left: -200vw
  }
  48% {
    left: -200vw
  }
  50% {
    left: -300vw
  }
  64% {
    left: -300vw
  }
  66% {
    left: -200vw
  }
  82% {
    left: -100vw
  }
  100% {
    left: 0%
  }
}

.slide {
  height: 100vh;
  min-width: 100vw;
  display: flex;
  align-items: center;
}

<div class="container">
  <div class="banner">
    <!-- main page with button -->
  </div>

  <div class="slideshow-wrapper">
    <div class="slide">
      <!-- content of the slide -->
    </div>

    <div class="slide">
      <!-- content of the slide -->
    </div>

    <div class="slide">
      <!-- content of the slide -->
    </div>

    <div class="slide">
      <!-- content of the slide -->
    </div>
  </div>
</div>

Answer 1

它不起作用，因为你有一个相对于幻灯片放映包装器的绝对位置，你可以取下该位置集并将其左侧填充从 0 更改为减去任何你想要的内容，使溢出隐藏到容器中

Answer 2

尝试删除绝对位置并在 wrraper 上设置固定的宽度和高度

overflow:hidden 在我的幻灯片项目中不起作用

The overflow:hidden is not working in my slideshow project

html

css

overflow