Javascript 如何在中滑动时拖动旋转木马

我是一名初级开发人员，正在努力解决一个问题，页面顶部有一个大约10张卡片的旋转木马。并非所有卡片都能同时显示在屏幕上，因此在角落中有两个箭头可以滚动它们（向左箭头和向右箭头）。单击向右箭头时，卡会滚动到末端，单击向左箭头时，卡会从右向左向后移动

我如何才能使它，当你点击鼠标下来，按住图片，并拖动他们左或右移动？我需要让他们移动不仅与箭头点击，但与鼠标拖动也。。。 我是否需要使用一些库（我找到react hammerjs，但没有找到任何好的文档/示例如何使用它）？ 提前感谢您的帮助

以下是一些可供参考的代码：

export const CardsBlock = () => {
  const scrollContainer = useRef(null)
  const [scrolled, setScrolled] = useState(false)
  const dispatch = useDispatch()

  useEffect(() => {
    const resizeListener = (e) => {
      if (e.target.outerWidth <= sizes.mobile) {
        setScrolled(null)
      } else {
        setScrolled(false)
      }
    }
    window.addEventListener('resize', resizeListener)
    return () => {
      window.removeEventListener('resize', resizeListener)
    }
  }, [])


  useEffect(() => {
    if (scrolled) {
      scrollTo(scrollContainer.current, scrollContainer.current.offsetWidth)
    } else {
      scrollTo(scrollContainer.current, 0)
    }
  }, [scrolled])

  return (
    <Well>
      <Container>
        <Wrapper padding={'0 0 16px'} justify={'space-between'} align={'center'}>
          <TitleText width={'auto'}>{translator('specilization.title', true)}</TitleText>
          <ArrowsContainer>
            <Icon
              onClick={() => setScrolled(false)}
              cursor={'pointer'}
              type={'arrow_left'}
              color={scrolled ? 'black4' : 'black1'}
            />
            <Icon
              onClick={() => setScrolled(true)}
              cursor={'pointer'}
              type={'arrow_right'}
              color={scrolled ? 'black1' : 'black4'}
            />
          </ArrowsContainer>
        </Wrapper>
        <SpecializationsInnerContainer ref={scrollContainer}>
          {specializations.map((specialization) =>
            <SpecializationCard
              key={specialization.id}
              image={specialization.image}
              title={specialization.title}
              color={'black1'}
              borderColor={'transparent'}
              onClick={() => handleOnClick(specialization.id)}
            />
          )}
          <SpecializationCard borderColor={'black15'} image={'image.png'} isAll onClick={openSpecializationFilter} title={translator('specilization.all', true)} color={'transparent'}/>
        </SpecializationsInnerContainer>
      </Container>
    </Well>
  )
}

export const CardsBlock=（）=>{
常量scrollContainer=useRef（null）
const[scrolled，setScrolled]=useState（false）
const dispatch=usedpatch（）
useffect（（）=>{
常量resizeListener=（e）=>{
如果（例如，目标外径{
window.removeEventListener（'resize'，resizeListener）
}
}, [])
useffect（（）=>{
如果（滚动）{
scrollTo（scrollContainer.current，scrollContainer.current.offsetWidth）
}否则{
scrollTo（scrollContainer.current，0）
}
}，[滚动]）
返回(
{translator（'specilization.title'，true）}
setScrolled（假）}
游标={'pointer'}
类型={'arrow_left'}
颜色={滚动的？'black4'：'black1'}
/>
setScrolled（真）}
游标={'pointer'}
类型={'arrow_right'}
颜色={滚动的？'black1'：'black4'}
/>
{specializations.map（（专门化）=>
handleOnClick（specialization.id）}
/>
)}
)
}

由于您没有提供任何代码片段或源代码，下面是一些基本示例。它应该可以帮助您开始

const slider = document.querySelector('.items');
let isDown = false;
let startX;
let scrollLeft;

slider.addEventListener('mousedown', (e) => {
  isDown = true;
  startX = e.pageX - slider.offsetLeft;
  scrollLeft = slider.scrollLeft;
});

slider.addEventListener('mouseleave', () => {
  isDown = false;
});

slider.addEventListener('mouseup', () => {
  isDown = false;
});

slider.addEventListener('mousemove', (e) => {
  if(!isDown) return;
  e.preventDefault();
  const x = e.pageX - slider.offsetLeft;
  const walk = (x - startX) * 3; //scroll-fast
  slider.scrollLeft = scrollLeft - walk;
});

---

在更多的研究中，在“react swipeable”npm模块中找到了答案

由于此处已经定义了箭头图标onclick逻辑，因此添加了相同的逻辑来响应可切换组件：

       <Swipeable onSwipedLeft={() => setScrolled(true)} onSwipedRight={() => setScrolled(false)} trackMouse={true}>
        <SpecializationsInnerContainer ref={scrollContainer}>
          {specializations.map((specialization) =>
            <SpecializationCard
              key={specialization.id}
              image={specialization.image}
              title={specialization.title}
              color={'black1'}
              borderColor={'transparent'}
              onClick={() => handleOnClick(specialization.id)}
            />
          )}
          <SpecializationCard borderColor={'black15'} image={'image.png'} isAll onClick={openSpecializationFilter} title={translator('specilization.all', true)} color={'transparent'}/>
        </SpecializationsInnerContainer>
       </Swipeable>

setScrolled（true）}onsweepdright={（）=>setScrolled（false）}trackMouse={true}>
{specializations.map（（专门化）=>
handleOnClick（specialization.id）}
/>
)}

您好，欢迎来到StackOverflow。请向我们展示一些您正在努力寻找解决方案的代码，以便团队能够帮助您。很抱歉，添加了一些代码。谢谢！