如何让这个无限轮播发挥作用？

Question

我有这个轮播，需要一个简单的操作：显示无限。问题在于动画被切断并在最后一个元素的末尾留下空白。我留下下面的代码，希望有人能帮助我。

<div className="slider pb-12">
        <div className="slider-items">
          <img src="./images/company_1.png" alt="" />
          <img src="./images/company_2.png" alt="" />
          <img src="./images/company_3.png" alt="" />
          <img src="./images/company_4.png" alt="" />
          <img src="./images/company_5.png" alt="" />
          <img src="./images/company_6.png" alt="" />
          <img src="./images/company_1.png" alt="" />
          <img src="./images/company_2.png" alt="" />
          <img src="./images/company_3.png" alt="" />
          <img src="./images/company_4.png" alt="" />
          <img src="./images/company_5.png" alt="" />
          <img src="./images/company_6.png" alt="" />
        </div>
      </div>

这就是代码的结构。下面留下我用过的样式

.slider {
    padding-top: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    overflow: hidden;
}

.slider-items {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    animation: scroll 30s linear infinite;
}

@keyframes scroll {

    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-50%);
    }
}

.slider-items img {
    width: 12%;
    margin: 40px;
    filter: grayscale(100%);
}

我尝试克隆内容、使用 sass、更改动画持续的秒数、所有容器的宽度、更改 HTML 结构，但没有任何效果。

Answer 1

我添加了图像和容器（我认为你错过了）。

请注意 100% 关键帧，如果您希望动画看起来平滑，则必须考虑一半的弯曲间隙:)

.slider {
  padding: 20px;
  overflow: hidden;
  background: grey;
}
.slider-items-container {
  display: contents;
  
}
.slider-items {
  gap: 20px;
  display: inline-flex;
  flex-wrap: no-wrap;
  animation: scroll 5s linear infinite;
}

img {
  width: 200px;
  height: 150px;
}

@keyframes scroll {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(calc(-50% - 10px));
    }
}

<div class="slider">
  <div class="slider-items-container">
    <div class="slider-items">
      <img src="https://img.freepik.com/psd-gratuit/lettres-argent-facade-du-batiment-verre_145275-162.jpg?size=626&ext=jpg&ga=GA1.1.1546980028.1711411200&semt=sph" alt="" />
      <img src="https://upload.wikimedia.org/wikipedia/commons/3/3a/M%C3%BCnster%2C_LVM%2C_B%C3%BCrogeb%C3%A4ude_--_2013_--_5149-51.jpg" alt="" />
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR5VDK6xeSfkbgUbiwQPLF6sxWYBrQTfcgyn6qUv4l11w&s" alt="" />
      <img src="https://media.istockphoto.com/id/178447404/fr/photo/b%C3%A2timents-daffaires-moderne.jpg?s=612x612&w=0&k=20&c=KDgacnz516dO2YiaMsiyHABoHaBhv5K1CRjHUEbcviQ=" alt="" />
      <img src="https://images.lawpath.com.au/2020/06/sean-pollock-PhYq704ffdA-unsplash-scaled.jpg" alt="" />
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSHsRbGBlz2CdOJ0WmplUX-0zqZ-jqG3JY74W7OyCG6EA&s" alt="" />
      <img src="https://img.freepik.com/psd-gratuit/lettres-argent-facade-du-batiment-verre_145275-162.jpg?size=626&ext=jpg&ga=GA1.1.1546980028.1711411200&semt=sph" alt="" />
      <img src="https://upload.wikimedia.org/wikipedia/commons/3/3a/M%C3%BCnster%2C_LVM%2C_B%C3%BCrogeb%C3%A4ude_--_2013_--_5149-51.jpg" alt="" />
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR5VDK6xeSfkbgUbiwQPLF6sxWYBrQTfcgyn6qUv4l11w&s" alt="" />
      <img src="https://media.istockphoto.com/id/178447404/fr/photo/b%C3%A2timents-daffaires-moderne.jpg?s=612x612&w=0&k=20&c=KDgacnz516dO2YiaMsiyHABoHaBhv5K1CRjHUEbcviQ=" alt="" />
      <img src="https://images.lawpath.com.au/2020/06/sean-pollock-PhYq704ffdA-unsplash-scaled.jpg" alt="" />
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSHsRbGBlz2CdOJ0WmplUX-0zqZ-jqG3JY74W7OyCG6EA&s" alt="" />
    </div>
  </div>
</div>