Why don't the elements in my slider repeat as expected?-CodePudding

I found this slider on CodePen. I modified it to use images in the slider with different sizes. The problem is when all logos slide away, the slider jumps to the first one. This looks not good. I want a repeating effect, that after the last logo the first one appear but with no "jump".

What can I do to solve my problem?

body,
html {
  height: 100%;
  background-color: white;
}

.container {
  overflow: hidden;
}

.container .slider {
  animation: slidein 30s linear infinite;
  white-space: nowrap;
}

.container .slider .logos {
  width: 100%;
  display: inline-block;
  margin: 0px 0;
}

.container .slider .logos .fab {
  width: calc(100% / 5);
  animation: fade-in 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) forwards;
}

@keyframes slidein {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

<div >
  <div >
    <div >
      <h1 >Featured in:</h1>
      <div >
        <div >
          <img src="https://via.placeholder.com/80">
          <img src="https://via.placeholder.com/80">
          <img src="https://via.placeholder.com/80">
          <img src="https://via.placeholder.com/80">
        </div>
      </div>
    </div>
  </div>
</div>

CodePudding user response：

change this:

.container {
  overflow: hidden;
  .slider {
    animation: slidein 30s linear infinite;
    white-space: nowrap;
    .logos {
      width: 100%;
      display: inline-block;
      margin: 0px 0;
      .fab {
        width: calc(100% / 5);
        animation: fade-in 0.5s 
          cubic-bezier(0.455, 0.03, 0.515, 0.955) forwards;
      }
    }
  }
}

to this:

.container {
  overflow: hidden;
  .slider {
    animation: slidein 30s linear infinite;
    white-space: nowrap;
    .logos {
      width: 100%;
      display: inline-block;
      margin: 0px 0;
      img {
        width: calc(100% / 5);
        animation: fade-in 0.5s 
          cubic-bezier(0.455, 0.03, 0.515, 0.955) forwards;
      }
    }
  }
}

CodePudding user response：

When you replaced the Font Awesome icons with images you didn't update the selector in the CSS to match. Also, the quantity of images is used in the CSS width calculation. You need to update that.

Finally, in the original demo the images were placed in the markup twice. You need to do that.

I also removed reliance on the surrounding markup to make the slider independently deployable.

.slider {
  white-space: nowrap;
  overflow: hidden;
}

.slider-inner {
  animation: slidein 30s linear infinite;
}

.slider .logos {
  width: 100%;
  display: inline-block;
  margin: 0px 0;
}

.slider .logos img {  /* updated selector */
  width: calc(100% / 4);  /* must match the number of elements in your slider */
  animation: fade-in 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) forwards;
}

@keyframes slidein {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

<h1 >Featured in:</h1>

<div >
  <div >

    <!-- must be included twice -->
    <div >
      <img src="https://via.placeholder.com/200">
      <img src="https://via.placeholder.com/200">
      <img src="https://via.placeholder.com/200">
      <img src="https://via.placeholder.com/200/ff0000">
    </div>

    <div >
      <img src="https://via.placeholder.com/200">
      <img src="https://via.placeholder.com/200">
      <img src="https://via.placeholder.com/200">
      <img src="https://via.placeholder.com/200/ff0000">
    </div>
  </div>
</div>