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％肯定，如果有可能這樣，與移動的利潤率，我會首先測試一些事情。