2017-08-26 16 views
1

私はコーディングについてほとんど知りませんし、HTMLとCSSのスライダーを作ろうとしていました。私は3つの画像で本当に基本的なスライドショーを作成することができました。しかし、コードは3番目の後に白いイメージを置きます。私が間違ったことを誰かに教えてもらえますか?なぜ最後の画像の後ろに白いページがありますか?可能であれば、どのようにして最後のイメージの後に最初のイメージに戻ったときにそれが不安定にならないようにすることができますか?画像スライダに白いページが表示されるのはなぜですか?

@keyframes slider { 
 

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

 
} 
 

 
#slider { 
 
    overflow: hidden; 
 
    width: 60%; 
 
    margin: 0 auto; 
 
} 
 

 
#slider figure img { 
 
    width: 20%; 
 
    float: left; 
 
} 
 

 
#slider figure { 
 
    position: relative; 
 
    width: 500%; 
 
    margin: 0; 
 
    left: 0; 
 
    text-align: left; 
 
    font-size: 0; 
 
    animation: 15s infinite slider; 
 
}
<div id="slider"> 
 
    <figure> 
 
    <img src="http://thewallpaper.co/wp-content/uploads/2016/03/fire-beach-widescreen-high-definition-wallpaper-pictures-download-full-free-download-wallpaper-high-resolution-colorful-2048x1367-736x459.jpg"> 
 
    <img src="http://thewallpaper.co/wp-content/uploads/2016/03/awesome-malaysiwide-hdesktop-backgrounphotos-windows-desktop-images-mac-wallpapers-colorful-2048x1367-736x459.jpg"> 
 
    <img src="https://s-media-cache-ak0.pinimg.com/originals/bf/2e/c5/bf2ec5d03e6ddb65bbff4c98ae367a36.jpg"> 
 
    </figure> 
 
</div> 
 

 

 
</body> 
 
</html>

+0

これは白いイメージではなく、ページ/ divの背景色です。色を変更すると、それに応じて白が変更されます。それが助けてくれることを願っています。 – mindaJalaj

答えて

1

あなただけがleft: -300%;を置けば、最後の画像は、容器の外にある3つのイメージを持っているので。ここで

は修正です:あなたが最後の画像上にあることを

@keyframes slider { 
 

 
0% { 
 
    left: 0; 
 
} 
 

 
20% { 
 
    left: 0; 
 
} 
 

 
25% { 
 
    left: -100%; 
 
} 
 

 
45% { 
 
    left: -100%; 
 
} 
 

 
50% { 
 
    left: -200%; 
 
} 
 

 
70% { 
 
    left: -200%; 
 
} 
 

 
75% { 
 
    left: 0; 
 
} 
 

 
95% { 
 
    left: 0; 
 
} 
 

 
100% { 
 
    left: 0; 
 
} 
 

 
} 
 

 
#slider { 
 
    overflow: hidden; 
 
    width: 60%; 
 
    margin: 0 auto; 
 
} 
 

 
#slider figure img { 
 
    width: 20%; 
 
    float: left; 
 
} 
 

 
#slider figure { 
 
    position: relative; 
 
    width: 500%; 
 
    margin: 0; 
 
    left: 0; 
 
    text-align: left; 
 
    font-size: 0; 
 
    animation: 15s infinite slider; 
 
}
<div id="slider"> 
 
    <figure> 
 
    <img src="http://thewallpaper.co/wp-content/uploads/2016/03/fire-beach-widescreen-high-definition-wallpaper-pictures-download-full-free-download-wallpaper-high-resolution-colorful-2048x1367-736x459.jpg"> 
 
    <img src="http://thewallpaper.co/wp-content/uploads/2016/03/awesome-malaysiwide-hdesktop-backgrounphotos-windows-desktop-images-mac-wallpapers-colorful-2048x1367-736x459.jpg"> 
 
    <img src="https://s-media-cache-ak0.pinimg.com/originals/bf/2e/c5/bf2ec5d03e6ddb65bbff4c98ae367a36.jpg"> 
 
    </figure> 
 
</div>

注 - (最初の1つ)次のスライドは右からではありません左。その視覚効果を得るには、javascriptを使用する必要があります。

+0

私はJavaScript/jqueryのビットを知っています。 – Venomous

+0

これをトレーニングに使用する場合は、スライダの最後の要素の前後に要素を配置することを検討する必要があります。あなたがただ解決策を必要とするなら - スライダライブラリを探してください:)それらの多くがあります。 – Dekel

関連する問題