如何在移动视图中添加触摸滑动滑块

Question

我正在研究 Next.js

当前，我的卡片可以通过点击任意一侧的卡片来移动。我想添加滑块功能，以便在移动视图中任何人都可以轻松地在卡上滑动。

我尝试了 SwiperJs ，但由于在div上无法正常工作，因此无法正常工作。但是我想在用 radio 按钮和 label 制造的这些卡上实现幻灯片功能。

这是我的主页功能的 HTML 部分。

             <section
                id="slider"
                className="w-16 h-20 inline-flex items-center justify-center mb-5 flex-shrink-0"
              >
                <input
                  type="radio"
                  name="slider"
                  id="s1"
                  checked={selectedIndex === 0}
                  onClick={() => check(0)}
                />
                <input
                  type="radio"
                  name="slider"
                  id="s2"
                  checked={selectedIndex === 1}
                  onClick={() => check(1)}
                />
                <input
                  type="radio"
                  name="slider"
                  id="s3"
                  checked={selectedIndex === 2}
                  onClick={() => check(2)}
                />
                <label htmlFor="s1" id="slide1">
                  {/* <img className="fea" src="./assets/img/img1.jpg" height="100%" width="100%"/> */}
                  <h1>Lorem Ipsum 01</h1>
                </label>
                <label htmlFor="s2" id="slide2">
                  {/* <img className="fea" src="./assets/img/img2.jpg" height="100%" width="100%"/> */}
                  <h1>Lorem Ipsum 02</h1>
                </label>
                <label htmlFor="s3" id="slide3">
                  {/* <img className="fea" src="./assets/img/img3.jpg" height="100%" width="100%"/> */}
                  <h1>Lorem Ipsum 03</h1>
                </label>
              </section>

这是我的 CSS 部分，当前正在移动卡。

#s1:checked~#slide3,
#s2:checked~#slide1,
#s3:checked~#slide2 {
  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, .3), 0 2px 2px 0 rgba(0, 0, 0, .2);
  transform: translate3d(-50%, 0, -100px);
}

#s1:checked~#slide1,
#s2:checked~#slide2,
#s3:checked~#slide3 {
  box-shadow: 0 13px 25px 0 rgba(0, 0, 0, .3), 0 11px 7px 0 rgba(0, 0, 0, .19);
  transform: translate3d(0, 0, 0);
}

#s1:checked~#slide2,
#s2:checked~#slide3,
#s3:checked~#slide1 {
  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, .3), 0 2px 2px 0 rgba(0, 0, 0, .2);
  transform: translate3d(50%, 0, -100px);
}

如果需要，这是我的 useState 部分，我将使用桌面视图中的按钮来移动卡。

  const [selectedIndex, setSelectedIndex] = React.useState(0);

  const checkNext = () => {
    const labels = document.querySelectorAll('#slider label');
    const nextIndex = selectedIndex === (labels.length - 1) ? 0 : selectedIndex + 1; 
    setSelectedIndex(nextIndex);
  }

  const check = index => setSelectedIndex(index);

感谢您的帮助。