Html 有没有办法让转盘滑块在手机上用手指滑动水平滚动？

所以我创建了这个旋转木马，它工作得很好，但我不知道如何使它在手指滑动时水平滚动。 我用

overflow-x:scroll

试过了，效果不错，但在Firefox上使用滚动条效果不太好。 这是HTML

<section class="opinions">
      <h2 class="opinions__title">What they’ve said</h2>
      <div class="wrap">
      <div class="slider">
        <div class="slider__item">
          <img
            class="slider__item--img"
            src="images/avatar-anisha.png"
            alt="Anisha Li"
          />
          <p class="slider__item--name">Anisha Li</p>
          <p class="slider__item--text">
            “Manage has supercharged our team’s workflow. The ability to
            maintain visibility on larger milestones at all times keeps everyone
            motivated.”
          </p>
        </div>
        <div class="slider__item">
          <img
            class="slider__item--img"
            src="images/avatar-ali.png"
            alt="Ali Bravo"
          />
          <p class="slider__item--name">Ali Bravo</p>
          <p class="slider__item--text">
            “We have been able to cancel so many other subscriptions since using
            Manage. There is no more cross-channel confusion and everyone is
            much more focused.”
          </p>
        </div>
        <div class="slider__item">
          <img
            class="slider__item--img"
            src="images/avatar-richard.png"
            alt="Richard Watts"
          />
          <p class="slider__item--name">Richard Watts</p>
          <p class="slider__item--text">
            “Manage allows us to provide structure and process. It keeps us
            organized and focused. I can’t stop recommending them to everyone I
            talk to!”
          </p>
        </div>
      </div>
    </div>
    </section>

    .slider {
  position: relative;
  display: flex;
  text-align: center;
  margin: 4rem 0;
  transition: 0.4s ease;
}
.slider__item {
  min-width: 320px;
  background: #f5f4f4;
  padding: 1rem 2rem;
  position: relative;
  margin: 0 0.5rem;
}