最後の画像の後に画像スライダが見えなくなりますか？

Question

私はイメージスライダーを持っています。私の問題は、私は3つの画像があることです。スライダーはそれらの画像を通ってスライドしますが、3枚目の画像（最後の画像）からスライドすると消えますが、最初の画像に再びスライドします。私はそれが必要なので、それは最後のものから最初のものにスライドし、ある時間間隔の間目に見えなくなる。ここではそれのための私のコードは、現在、次のとおりです。

#imgslide { 
 
    width: 550px; 
 
    height: 300px; 
 
    border-radius: 10px; 
 
    position: relative; 
 
    top: 25%; 
 
    left: 50%; 
 
    margin-top: -150px; 
 
    margin-left: -225px; 
 
    overflow: hidden; 
 
} 
 
#imgslide figure img { 
 
    width: 20%; 
 
    float: left; 
 
} 
 
#imgslide figure { 
 
    position: relative; 
 
    width: 500%; 
 
    margin: 0; 
 
    left: 0; 
 
    text-align: left; 
 
    font-size: 0; 
 
    animation: 15s slidy infinite; 
 
} 
 
/* Keyframes */ 
 

 
@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%; 
 
    } 
 
}

<div id="imgslide"> 
 
    <figure> 
 
    <img src="http://www.indraneelghosh.com/img/sport/sport_318_test-201.gif" alt=""> 
 
    <img src="http://www.indraneelghosh.com/img/sport/sport_318_test-201.gif" alt=""> 
 
    <img src="http://www.indraneelghosh.com/img/sport/sport_318_test-201.gif" alt=""> 
 
    </figure> 
 
</div>

Answer 1

この

#imgslide { 
 
    width: 450px; 
 
    height: 300px; 
 
    border-radius: 10px; 
 
    position: relative; 
 
    top: 25%; 
 
    left: 50%; 
 
    margin-top: 100px; 
 
    margin-left: -225px; 
 
    overflow: hidden; 
 
} 
 
#imgslide figure img { 
 
    width: 20%; 
 
    float: left; 
 
} 
 
#imgslide figure { 
 
    position: relative; 
 
    width: 500%; 
 
    margin: 0; 
 
    left: 0; 
 
    text-align: left; 
 
    font-size: 0; 
 
    animation: 15s slidy infinite; 
 
} 
 
/* Keyframes */ 
 

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

<div id="imgslide"> 
 
    <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/ankor-wat.jpg" alt=""> 
 
    </figure> 
 
</div>

を試します

Answer 2

スペースのわずか60％（3×20％）を満たし、あなたのイメージは、スペースを埋めるかの33.33パーセントにあなたのイメージを伸ばすために2枚のより多くの画像を追加します300％の幅と数字（0％、100％及び200％にアニメーションを調整する）