CSS 内容滑块辩论

Question

帮我解决一场辩论。是否可以在不使用overflow:hidden; 的情况下编写内容滑块？

Slider Specs
Slides slide out left side as new slide slides in from right
Slides are DIVs

基本上可以这样做： https://codepen.io/dudleystorey/pen/ehKpi

@keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}

body { margin: 0; } 
div#slider { overflow: hidden; }
div#slider figure img { width: 20%; float: left; }
div#slider figure { 
  position: relative;
  width: 500%;
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: 30s slidy infinite; 
}

<div id="slider">
<figure>
<img src="http://demosthenes.info/assets/images/austin-fireworks.jpg" alt="">
<img src="http://demosthenes.info/assets/images/taj-mahal.jpg" alt="">
<img src="http://demosthenes.info/assets/images/ibiza.jpg" alt="">
<img src="http://demosthenes.info/assets/images/ankor-wat.jpg" alt="">
<img src="http://demosthenes.info/assets/images/austin-fireworks.jpg" alt="">
</figure>
</div>

不使用溢出：隐藏。

Answer 1

好吧，对于全屏滑块，使用这种方法是可能的：

 div#slider {
 border:2px solid black;
 box-shadow: 5px 5px 1px grey;    
 background:transparent;

 max-width: 1400px;
 position:fixed;
 width:100%;
 height:100%;
 top:0px;
 left:0px;
 z-index:1000;
 }

http://codepen.io/damianocel/pen/wKxgpz

为了 100% 确定它是否可能，通过移动边距，我必须先测试几件事。