从Codepen获得了这个旋转横幅JS，更改了一些值以适应我拥有的类和变量。动画工作很好，我唯一的问题是上一个按钮和下一个按钮不工作。而是暂停动画。我试图删除填充模式，但这不起作用。在codepen上工作，所以我想js可能有问题。

HTML:

<div class="desktop" id="mobile-accessory" style="transform: translateY(4rem);">
  <button class="prev-accessory" id="prev-accessory"></button>
  <div class="mobile-accessory charge" id="charge">
    <img style="width: 4.8rem;margin-bottom: 3rem" src="">
    <p style="font-size: 2rem;font-weight: 700;"></p>
    <p></p>
  </div>
  <div class="mobile-accessory magnetic" id="magnetic">
    <img style="width: 4.9rem;margin-bottom: 3rem" src="">
    <p style="font-size: 2rem;font-weight: 700;"></p>
    <p></p>
  </div>
  <div class="mobile-accessory all-at-once" id="all-at-once">
    <div class="accessory-images" style="margin-bottom: 5.868rem;">
      <img style="width: 2.8rem;margin-right: 2.5rem" src="">
      <img style="width: 4.8rem;margin-right: 2.5rem" src="">
      <img style="width: 3.2rem;" src="">
    </div>
    <p style="font-size: 2rem;font-weight: 700;"></p>
    <p></p>
  </div>
  <button class="next-accessory" id="next-accessory"></button>
</div>

CSS:

<div class="desktop" id="mobile-accessory" style="transform: translateY(4rem);">
  <button class="prev-accessory" id="prev-accessory"></button>
  <div class="mobile-accessory charge" id="charge">
    <img style="width: 4.8rem;margin-bottom: 3rem" src="">
    <p style="font-size: 2rem;font-weight: 700;"></p>
    <p></p>
  </div>
  <div class="mobile-accessory magnetic" id="magnetic">
    <img style="width: 4.9rem;margin-bottom: 3rem" src="">
    <p style="font-size: 2rem;font-weight: 700;"></p>
    <p></p>
  </div>
  <div class="mobile-accessory all-at-once" id="all-at-once">
    <div class="accessory-images" style="margin-bottom: 5.868rem;">
      <img style="width: 2.8rem;margin-right: 2.5rem" src="">
      <img style="width: 4.8rem;margin-right: 2.5rem" src="">
      <img style="width: 3.2rem;" src="">
    </div>
    <p style="font-size: 2rem;font-weight: 700;"></p>
    <p></p>
  </div>
  <button class="next-accessory" id="next-accessory"></button>
</div>

JS

<div class="desktop" id="mobile-accessory" style="transform: translateY(4rem);">
  <button class="prev-accessory" id="prev-accessory"></button>
  <div class="mobile-accessory charge" id="charge">
    <img style="width: 4.8rem;margin-bottom: 3rem" src="">
    <p style="font-size: 2rem;font-weight: 700;"></p>
    <p></p>
  </div>
  <div class="mobile-accessory magnetic" id="magnetic">
    <img style="width: 4.9rem;margin-bottom: 3rem" src="">
    <p style="font-size: 2rem;font-weight: 700;"></p>
    <p></p>
  </div>
  <div class="mobile-accessory all-at-once" id="all-at-once">
    <div class="accessory-images" style="margin-bottom: 5.868rem;">
      <img style="width: 2.8rem;margin-right: 2.5rem" src="">
      <img style="width: 4.8rem;margin-right: 2.5rem" src="">
      <img style="width: 3.2rem;" src="">
    </div>
    <p style="font-size: 2rem;font-weight: 700;"></p>
    <p></p>
  </div>
  <button class="next-accessory" id="next-accessory"></button>
</div>

顺晟科技：