Slider animation

Nelson Pacheco

I'm struggling to change the animation of my slider, every time I try to change something, the slider disappears. I want a slider right animation instead of fade.

I have researched, but nothing fits what I want.

.slider {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
  z-index: -1;
}

.slider .fadeimg {
  width: 100%;
  height: auto;
  position: absolute;
  top: 47.5%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  animation: galeria 9s infinite;
  clip-path: ellipse(100% 95% at 50% 0%);
}

.fadeimg:nth-child(1) {}

.fadeimg:nth-child(2) {
  animation-delay: 3s;
  -webkit-animation-delay: 3s;
}

.fadeimg:nth-child(3) {
  animation-delay: 6s;
  -webkit-animation-delay: 6s;
}

@keyframes galeria {
  33.33% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

<div class="slider">
  <img class="fadeimg" src="img/dummy-640x310-1.jpg" alt="">
  <img class="fadeimg" src="img/dummy-640x310-2.jpg" alt="">
  <img class="fadeimg" src="img/dummy-640x310-3.jpg" alt="">
  <div class="gradient"></div>
</div>

shariqkhan

Try this:

.slider-container {
  width:640px;
  overflow:hidden;
}
.slider {
  width: 2000px;
  height: 100vh;
  position: relative;
  overflow: hidden;
  z-index: -1;
}

.slider .fadeimg {
  /*width: 100%;*/
  width:auto;
  height: auto;
  /*position: absolute;
  top: 47.5%;
  left: 50%;
  transform: translate(-50%, -50%);*/
  opacity: 1;
  animation: galeria 9s infinite;
  clip-path: ellipse(100% 95% at 50% 0%);
}

.fadeimg:nth-child(1) {
    animation-delay: 0s;
  -webkit-animation-delay: 3s;
}

.fadeimg:nth-child(2) {
  animation-delay: 3s;
  -webkit-animation-delay: 3s;
}

.fadeimg:nth-child(3) {
  animation-delay: 6s;
  -webkit-animation-delay: 3s;
}

@keyframes galeria {
  0% {
    /*opacity: 1;*/
    transform: translate(0%,0%);
  }
  50% {
    transform: translate(-100%,0%);
  }
  100% {
    transform: translate(-200%,0%);
  }
}

<div class="slider-container">
<div class="slider">
  <img class="fadeimg" src="https://dummyimage.com/640x310/0000ff/fff" alt="">
  <img class="fadeimg" src="https://dummyimage.com/640x310/ff0000/fff" alt="">
  <img class="fadeimg" src="https://dummyimage.com/640x310/00ff00/fff" alt="">
  <div class="gradient"></div>
</div>
</div>

Collected from the Internet

Please contact [email protected] to delete if infringement.