基於進度移動條的輪播組件

Question

我有以下模型：

到目前為止，我設法做了以下非常接近的事情：https://codesandbox.io/s/codepen-with-react-forked-16t6rv?file=/src/components/TrendingNFTs.js

我有以下要解決的問題：

1. 當按下下一個和上一個按鈕時，組件似乎重置，我想要的是停在那里，以防元素是列表中的最后一個
2. 我發現帶有箭頭的卡片下方的進度條很難實現，我想問一下你們是否曾經有過類似的東西。

提前感謝，如果有什么願意幫助我至少有一些想法。

Answer 1

您可以在開始時使用 let count = 0 並將代碼的 rest 更新為

const shiftPrev = (copy) => {
    let lastcard = copy.pop();
    if (count > 0) {
      copy.splice(0, 0, lastcard);
      setCarouselItems(copy);
    }
  };



const shiftNext = (copy) => {
    let firstcard = copy.shift();
    if (count < copy.length) {
      copy.splice(copy.length, 0, firstcard);
      setCarouselItems(copy);
    }
  };

邏輯是您采用初始計數（您也可以將計數保留在 state 但在 setState 上它將重新渲染，這可能會導致稍后出現性能問題）

此外，請考慮添加 css 及其在 UI 上顯示的初始卡，並相應地設置您的開始/結束計數。