CODEWITHSUNDEEP
csshtmlslideshow
shrouk
shrouk

Reputation: 43

I want to make a slideshow

This is the code of the slide show in html

<div id="slideshow">
    <img src="images/slideshow/1.png"/> 
    <img src="images/slideshow/2.png"/>
    <img src="images/slideshow/3.png"/>
    <img src="images/slideshow/4.png"/>
    <img src="images/slideshow/5.png"/>
    <img src="images/slideshow/6.png"/>
    </div>

And this is my css for it 

#slideshow{
    width:1100px;
    height:432px;
    position:relative;
    border:3px solid #404A7F;
    margin:auto;
    margin-top:35px;
    overflow:hidden;}

#slideshow img{
    position:absolute;
    opacity:0;
    animation:move 30s infinite;}

@keyframes move{
    0%{opacity:1;}
    100%{opacity:1;}}

#slideshow img:nth-child(1){
    animation-delay:0s;}

#slideshow img:nth-child(2){
    animation-delay:5s;}

#slideshow img:nth-child(3){
    animation-delay:10s;}

#slideshow img:nth-child(4){
    animation-delay:15s;}

#slideshow img:nth-child(5){
    animation-delay:20s;}

#slideshow img:nth-child(6){
    animation-delay:25s;}

But when the last image shows the slideshow doesn't start again from the first image. Can someone please tell me what's wrong?

Upvotes: 0

Views: 81

Answers (1)

GolezTrol
GolezTrol

Reputation: 116100

The problem is that you fade from 1 opacity to 1 opacity. After you correct that, it's till not okay, since you fade in during the whole period of 30 seconds, so an image is not fully faded in when the next image starts. And lastly, it doesn't wrap well, since it starts without any visible image.

Here is a fixed version of what I think you tried to achieve. Note I used colors instead of image for the demo, but they are still actual image elements, and it should work fine in your situation.

Basically what it does:

  • Shows the last image always, but with a z-index of -1, so it is always visible behind the others. This makes that image the one that is immediately visible.
  • Fades in quickly (during only a part of the 5 seconds in which the image is visible)
  • Fades out at the same pace, so fading out the prio to last image actually shows the last one.

The trick is to fix the animation so the images fade in and out at the right times within the animation.

I've commented the various frame in the animation to explain why I chose those values.

Possibly even better: I think it should be possible to show the first one too, by changing making the opacity 1 for the first 17%, then fade to 0 from 17% to 22%, and then fade to 1 again from 95% to 100%. But unfortunately, I'm leaving for Christmas dinner, and I can't try it out now. ;)

#slideshow{
    width:1100px;
    height:432px;
    position:relative;
    border:3px solid #404A7F;
    margin:auto;
    margin-top:35px;
    overflow:hidden;}

#slideshow img{
    position:absolute;
    opacity:0;
    animation:move 30s infinite;
    width: 300px; height: 200px; /* Demo only */
}

@keyframes move{
    /* Relevant information. You have 6 images, taking up 16.66% (say 17%) of the animation 
       time. So fading in needs to take place within this time.
       Also, to wrap properly, the last image is put in the back and is always visible, so to
       show that, you basically hide the prior one. Because of this, fading out has to 
       commence at 17% and has to have the same duration as the fading in. 
    */
  
    /* Start transparent */
    0%{opacity:0;}
    /* Move in a relatively short time to full opacity for a fade in effect. This can be anything from 0 to 17% */
    5%{opacity:1;}
    /* Stay at that level until after the next image has faded in at 100 / 6 ~ 17%. */
    17%{opacity:1;}
    /* Fade out at the same pace. This is needed for the animation to wrap seemlessly, 
       so 17% + 5% = 22% until full fade out */
    22%{opacity:0;}
    /* Stay there until the next round */
    100%{opacity: 0};
}

#slideshow img:nth-child(1){
    animation-delay:0s;
  background-color: red;
}

#slideshow img:nth-child(2){
    animation-delay:5s;
  background-color: orange;
}

#slideshow img:nth-child(3){
    animation-delay:10s;
  background-color: yellow;
}

#slideshow img:nth-child(4){
    animation-delay:15s;
  background-color: green;
}

#slideshow img:nth-child(5){
    animation-delay:20s;
  background-color: blue;
}

#slideshow img:nth-child(6){
    animation-delay:25s;
  background-color: purple;
  opacity: 1;
  z-index: -1;
}
<div id="slideshow">
    <img src="images/slideshow/1.png"/> 
    <img src="images/slideshow/2.png"/>
    <img src="images/slideshow/3.png"/>
    <img src="images/slideshow/4.png"/>
    <img src="images/slideshow/5.png"/>
    <img src="images/slideshow/6.png"/>
</div>

Upvotes: 1

Related Questions