-
CSS Slider
Here are the two versions: First the CSS and my own new code for my own images (the next example is with the coders original images) With my version the last image just flashes a halv second or so ... But not with the original images ... Why is that?
Code:
<style>
@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;
}
</style>
</head>
<body>
<div id="slider">
<figure>
<img src="images/image11.jpg" alt="">
<img src="images/image12.jpg" alt="">
<img src="images/image13.jpg" alt="">
<img src="images/image14.jpg" alt="">
<img src="images/image14.jpg" alt="">
</figure>
</div>
...............................................................................................................................
Using the same CSS
Code:
<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>
-
I don't really understand what you're describing. You also don't say if the issue is only present in particular browser or OS.
Also, the last block of code has the same image in the first and last spot - does that have any bearing on what you are trying to describe?
A live web page would be best to illustrate the issue and save us from having to construct a page on your behalf. If you haven't got your own web space, please use a free service such as JSBin, JSFiddle or CodePen
