CSS slideshow issues with last image not showing up but for a split second

Question

I have created a slideshow with much input derived from other very talented individuals (I'm learning). However, my code seems to go all of the way to the fifth image, but quickly shifts right back to the first instead of staying on the same schedule as the previous four slides. I am trying to avoid the use of JS or jQuery. I feel it is easier to read, especially for me considering I have very little Java background.

Here is the code I am currently using:

@import url(http://fonts.googleapis.com/css?family=Istok+Web);
@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,
figure {
  margin: 0;
  background: #101010;
  font-family: Istok Web, sans-serif;
  font-weight: 100;
}
div#captioned-gallery {
  width: 100%;
  overflow: hidden;
}
figure.slider {
  position: relative;
  width: 500%;
  font-size: 0;
  animation: 60s slidy infinite;
}
figure.slider figure {
  width: 20%;
  height: auto;
  display: inline-block;
  position: inherit;
}
figure.slider img {
  width: 100%;
  height: 95%;
}
figure.slider figure figcaption {
  position: absolute;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  width: 100%;
  font-size: 2rem;
  padding: .6rem;
}

So I figure there has to be something wrong with the keyframes part. However, I think I may just be horrible at that and am having a lot of trouble finding a good reference that makes sense to me. I've messed with the percentages, but can't seem to get it right. I mainly need to know how keyframes work and how the job is divided up amongst each slide. I would even like to know how to add another slide into the mix, but tackling this first issue would be a great start. I appreciate you taking the time to dissect this. All help is greatly appreciated.

Harry · Accepted Answer

Before I get to the reason why the last image shows up only for a split second, there are a few other changes that need to be made in-order for the slideshow to work properly:

The CSS posted in question seems to have been coded with the assumption that there would be only 5 images but the HTML markup has six .slider figure elements. I am not sure if this was intentional or it is a mistake but I will explain the changes based on the HTML provided.
First, the width of figure.slider should be changed to 600% from 500% because there are six images and each have to be 100% width (that is, cover the entire body). This should always be calculated as (no. of elements * 100%). If this is not done, some of the images would wrap to the next line and will get hidden due to the overflow: hidden setting on the parent.
Next, the width of figure.slider figure should be changed from 20% to 16.67% because we have six images now and so each image should have 1/6^th of 100% as its width.
When we have 5 images, at left: 0%, the first image would be shown, at left: -100%, the 2^nd image would be shown and so only at left: -400% the 5th image would be shown. As per code provided in question, the left: -300% to left: -400% movement happens only between 95% to 100% and so the 5th image comes fully into view only at 100% which is the same time as the end of the animation and this is why the last image is displayed only for a split second.
In-order to address the aforementioned issue, the keyframe rules should be changed. Since for our case we have taken 6 images, we need 5 (n-1) slide movements and each slide movement is done over 5% of the animation's duration. This means that a total of 25% of the duration is used up by the slide movements. Now the remaining 75% should be split up equally among the image elements so that each of them would be visible for x seconds before disappearing. So, we arrive at 12.5% stay time for each image and 5% slide movement time. Once we do this modification to @keyframes, we can see that each image gets their screen time (which is 12.5% of 60s = 7.5s).

@import url(http://fonts.googleapis.com/css?family=Istok+Web);
@keyframes slidy {
  0% {
    left: 0%;
  }
  12.5% {
    left: 0%;
  }
  17.5% {
    left: -100%;
  }
  30% {
    left: -100%;
  }
  35% {
    left: -200%;
  }
  47.5% {
    left: -200%;
  }
  52.5% {
    left: -300%;
  }
  65% {
    left: -300%;
  }
  70% {
    left: -400%;
  }
  82.5% {
    left: -400%;
  }  
  87.5% {
    left: -500%;
  }
  100% {
    left: -500%;
  }  
}
body,
figure {
  margin: 0;
  background: #101010;
  font-family: Istok Web, sans-serif;
  font-weight: 100;
}
div#captioned-gallery {
  width: 100%;
  overflow: hidden;
}
figure.slider {
  position: relative;
  width: 600%;
  font-size: 0;
  animation: 60s slidy infinite;
}
figure.slider figure {
  width: 16.66%;
  height: auto;
  display: inline-block;
  position: inherit;
}
figure.slider img {
  width: 100%;
  height: 95%;
}
figure.slider figure figcaption {
  position: absolute;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  width: 100%;
  font-size: 2rem;
  padding: .6rem;
}

CSS slideshow issues with last image not showing up but for a split second

Answers (1)

Related Questions