这是一个过渡的例子，我用tailwind + nextjs做了这个滑块

<main className='w-full h-screen p-36 bg-gray-800'>
    <div className='transition-all relative h-full p-3 rounded-2xl mx-auto mt-3 bg-cover bg-no-repeat bg-center' style={{ backgroundImage: `url(${images[currentImg].url})` }}>
      <span className='cursor-pointer absolute top-1/2 left-0 -translate-y-1/2 ml-4' onClick={handlePrev}>PREV</span>
      <span className='cursor-pointer absolute top-1/2 right-0 -translate-y-1/2 mr-4 ' onClick={handleNext}>NEXT</span>
    </div>
  </main>

  const images = [
    { url: "./first.png" }, { url: "./second.png" }, { url: "./third.png" }, { url: "./fourth.png" }
  ]
  const [currentImg, setCurrentImg] = useState(0)

  const handleNext = () => {
    const isLast = currentImg === images.length - 1
    isLast ? setCurrentImg(0) : setCurrentImg(prev => prev + 1)
  }
  const handlePrev = () => {
    const isFinished = currentImg === 0
    isFinished ? setCurrentImg(images.length - 1) : setCurrentImg(prev => prev - 1)
  }

images数组是填充了包含图像URL的对象的数组