纯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>