純CSS滑塊上的最後一張幻燈片

Question

我用純HTML/CSS滑塊是按照這個最後的圖像之後返回一個空白幻燈片工作返回空白圖像JS小提琴（https://codepen.io/dudleystorey/pen/ehKpi）

如您能夠在這個鏈接（http://eavestroughcleaning.ca/temp.php）上看到一個圖像加載（總共3個）並且在重新加載/返回到第一個之前滑入保持5秒的「空白」區域。沒有JavaScript，你可以直接查看源代碼，但是，這裏是很好的措施。

CSS：

@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: 10s slidy infinite; 
    } 

HTML：

<div id="slider"> 
    <figure> 
    <img src="slider-img1.jpg" alt></figure> 
    <figure><img src="slider-img2.jpg" alt></figure> 
    <figure><img src="slider-img3.jpg" alt></figure> 
    </div> 

從我的研究，似乎這個問題在本質上是零星的，然而，基於可能的瀏覽器，甚至可能是OS（顯然）我還沒有找到解決辦法。我使用Fire Mozilla Firefox（49.0.1）使用Windows 10（全部更新）。我也在Chrome中嘗試過，但很快就會遇到同樣的問題。建議表示讚賞。

Answer 1

如前所述@加比 - 又名-G-petrioli提到的CSS代碼是爲5張幻燈片不3.

試試這個：

@keyframes slidy { 
 
0% { left: 0%; }  /* 0 - 30% of animation time */ 
 
30% { left: 0%; } /* 1st slide will be visible */ 
 
33% { left: -100%; } /* 30% - 33% slide change will occur */ 
 
63% { left: -100%; } /* etc.. */ 
 
66% { left: -200%; } 
 
100% { left: -200%; } 
 
} 
 

 
body { margin: 0; } 
 
div#slider { overflow: hidden; } 
 

 
div#slider figure img { 
 
    width: 33.333%; /* image will be 33.333% of total width */ 
 
    float: left; 
 
} 
 
div#slider figure { 
 
    position: relative; 
 
    width: 300%;  /* total width of 3 slides (3*100%) */ 
 
    margin: 0; 
 
    left: 0; 
 
    text-align: left; 
 
    font-size: 0; 
 
    animation: 10s slidy infinite; /* length of animation */ 
 
}

<base href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/"> 
 
<div id="slider"> 
 
    <figure> 
 
    <img src="austin-fireworks.jpg" alt> 
 
    <img src="taj-mahal_copy.jpg" alt> 
 
    <img src="ibiza.jpg" alt> 
 
    </figure> 
 
</div>