如何根据各自的id滚动图像

我创建了一个滑块,在各个图像旁边显示内容。我已经成功地做到了这一点,但我遇到了一个问题。例如,当我使用按钮导航到第5幅图像时,第5幅的内容会正确显示,但第5幅本身不会水平滚动。我不确定如何实现这种水平滚动。任何好的解决方案都将不胜感激。

以及使用触控板手势滚动的解决方案,如果可能的话,还可以链接我任何文章或视频
这是代码(使用React、TailwindCss、Framer Motion和React图标)

import React, { useEffect, useRef, useState } from "react"
import { motion } from "framer-motion"
import { FaChevronRight as Right, FaChevronLeft as Left } from "react-icons/fa"
import images from "../images"

const Carousel = ({ images }) => {
  const carousel = useRef()
  const [width, setWidth] = useState(0)
  const [currentIndex, setCurrentIndex] = useState(0)

  useEffect(() => {
    const carouselWidth = carousel.current.scrollWidth
    const carouselOffset = carousel.current.offsetWidth
    setWidth(carouselWidth - carouselOffset)
  }, [])

  const handleImageClick = (image, index) => {
    setCurrentIndex(index)
  }

  const handleNavClick = direction => {
    if (direction === "prev" && currentIndex > 0) {
      setCurrentIndex(currentIndex - 1)
    } else if (direction === "next" && currentIndex < images.length - 1) {
      setCurrentIndex(currentIndex + 1)
    }
  }

  return (
    <div className="carousel-container">
      <div
        style={{
          width: `${window.outerWidth}px`,
        }}
        ref={carousel}
        className="carousel mx-auto rounded-md overflow-hidden"
      >
        <motion.div
          drag="x"
          dragConstraints={{
            right: 0,
            left: -width,
          }}
          className="inner-carousel flex items-center ease-linear gap-4"
        >
          {images.map((image, idx) => (
            <div
              key={idx}
              onClick={() => handleImageClick(image, idx)}
              className={`min-w-[20rem] object-contain rounded-md h-[20rem] ${
                currentIndex === idx ? "border-4 border-red-600" : "opacity-50"
              }`}
            >
              <img
                src={image.url}
                alt=""
                className="pointer-events-none object-fit rounded-md"
              />
            </div>
          ))}
        </motion.div>
      </div>
      <div className="carousel-content bg-green-300 px-16 relative">
        <div className="head">
          <h1 className="transition-all text-left ease-linear text-2xl font-bold">
            {images[currentIndex].title}
          </h1>
          <p className="transition-all text-justify ease-linear">
            {images[currentIndex].content}
          </p>
        </div>
        <div className="carousel-nav absolute top-4 transform translate-y-10 flex z-30 space-x-4">
          <button
            onClick={() => handleNavClick("prev")}
            className={`bg-red-600 text-white rounded-full p-2 ${
              currentIndex === 0 ? "opacity-50" : ""
            }`}
          >
            <Left />
          </button>
          <button
            onClick={() => handleNavClick("next")}
            className={`bg-red-600 text-white rounded-full p-2 ${
              currentIndex === images.length - 1 ? "opacity-50" : ""
            }`}
          >
            <Right />
          </button>
        </div>
      </div>
    </div>
  )
}

const NetflixSlider = () => {
  return (
    <section className="netflix-slider h-screen ">
      <div className="container max-w-7xl overflow-hidden px-8 h-full py-4">
        <Carousel images={images} />
      </div>
    </section>
  )
}

export default NetflixSlider

我尝试使用无法实现的拖动运动功能