CODEWITHSUNDEEP
htmlcss
Daniel Holler
Daniel Holler

Reputation: 245

Image slider going invisible after last image?

So I have an image slider and it works... kind of. My problem lies that I have 3 images. The slider slides through those images, but when it slides off the 3rd image (last one) it just dissappears, but then it slides back to the first image again? I need it so it slides from the last one to the first one, instead of going invisible for an interval. Here is my code for it currently:

#imgslide {
  width: 550px;
  height: 300px;
  border-radius: 10px;
  position: relative;
  top: 25%;
  left: 50%;
  margin-top: -150px;
  margin-left: -225px;
  overflow: hidden;
}
#imgslide figure img {
  width: 20%;
  float: left;
}
#imgslide figure {
  position: relative;
  width: 500%;
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: 15s slidy infinite;
}
/* Keyframes */

@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%;
  }
}
<div id="imgslide">
  <figure>
    <img src="http://www.indraneelghosh.com/img/sport/sport_318_test-201.gif" alt="">
    <img src="http://www.indraneelghosh.com/img/sport/sport_318_test-201.gif" alt="">
    <img src="http://www.indraneelghosh.com/img/sport/sport_318_test-201.gif" alt="">
  </figure>
</div>

Upvotes: 0

Views: 64

Answers (2)

Krupesh Kotecha
Krupesh Kotecha

Reputation: 2412

try this

#imgslide {
  width: 450px;
  height: 300px;
  border-radius: 10px;
  position: relative;
  top: 25%;
  left: 50%;
  margin-top: 100px;
  margin-left: -225px;
  overflow: hidden;
}
#imgslide figure img {
  width: 20%;
  float: left;
}
#imgslide figure {
  position: relative;
  width: 500%;
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: 15s slidy infinite;
}
/* Keyframes */

@keyframes slidy {
  0% {
    left: 0%;
  }
  20% {
    left: 0%;
  }
  25% {
    left: -100%;
  }
  45% {
    left: -100%;
  }
  50% {
    left: -200%;
  }
  70% {
    left: -200%;
  }
  75% {
    left: 0%;
  }
}
<div id="imgslide">
  <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/ankor-wat.jpg" alt="">
  </figure>
</div>

Upvotes: 1

Pepo_rasta
Pepo_rasta

Reputation: 2900

your images filling only 60% of space(3x 20%), add 2 more images to fill space or stretch your images to 33.33% of width and figure to 300%(adjust animation to 0%,100% and 200%)

Upvotes: 0

Related Questions