CSS Slider

**GerrieW** · 03-13-2016, 05:07 PM

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>

**Beverleyh** · 03-13-2016, 05:29 PM

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

Thread: CSS Slider

Thread Tools

Search Thread

CSS Slider

Similar Threads

Featured Content Slider. Youtube video don´t stop when slider changes

slider

Featured Content Slider: slider on top of slideshow

Featured Content Slider v2.4 - one slider with several paginate-slider

Featured Content Slider v2.0 - slider height fixed ?

Bookmarks

Bookmarks

Posting Permissions