我是一名初級開發人員，正在努力解決頁面頂部有一個帶有大約 10 張卡片的輪播的問題。并非所有的卡片都可以同時顯示在屏幕上，所以角落里有 2 個箭頭可以滾動它們（左箭頭和右箭頭）。當您單擊向右箭頭時，卡片會滾動到末尾，當您單擊向左箭頭時，它們會從右向左向后移動。當您按下鼠標并按住圖像并拖動它們時，我怎樣才能使它們向左或向右移動？我需要讓它們不僅通過單擊箭頭而且還通過鼠標拖動移動...我是否需要使用一些庫（我找到了 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>