我試圖使用image組件在Next.js中創(chuàng)建一個(gè)圖像滑塊。我正在遍歷一個(gè)圖像列表，并使用key prop來確保圖像以正確的順序顯示。但是，當(dāng)我使用fill prop來調(diào)整圖像的大小以填充其容器的寬度時(shí)，只有最后一個(gè)圖像是可見的。 我是這樣循環(huán)播放幻燈片的:

<div className="relative overflow-hidden rounded-2xl">
        <div className="flex transition-transform duration-1000 ease-out aspect-square"
          style={{
            transform: `translateX(-${curr * 100}%)`,
          }}>
          {listing.slides.map((slide, i) => (
            <Image src={slide} key={i} fill />
          ))}
        </div>
</div>

listing.slides包含圖片的鏈接，這些圖片存放在Unsplash上，我確保該網(wǎng)站被列入next.config.js的白名單中。

先放幻燈片:(實(shí)際上應(yīng)該是最后一張) 所有其他幻燈片:

我使用函數(shù)prev()和next()來切換圖像:

const [curr, setCurr] = useState(0);

  const prev = (event) => {
    event.stopPropagation();
    event.preventDefault();
    setCurr((curr) =>
      curr === 0 ? listing.slides.length - 1 : curr - 1
    );
  };
  const next = (event) => {
    event.stopPropagation();
    event.preventDefault();
    setCurr((curr) =>
      curr === listing.slides.length - 1 ? 0 : curr + 1
    );
  };

使用常規(guī)標(biāo)簽沒有任何問題。

我已經(jīng)嘗試指定with和height屬性來指定圖像的大小，但是這會(huì)導(dǎo)致圖像堆疊在一起。