為什么我的滑塊不能正常向后作業

所以我有下一個和上一個按鈕，下一個按鈕作業得很好，但上一個按鈕沒有。這是代碼。

import React,{useEffect,useState,useRef} from "react";

function Slider() {
    const colors = ["#0088FE", "#00C49F", "#FFBB28"];

    const items = [
        [1,2,3],
        [1,2,3],
        [1,2,3]
    ]

    const [index, setIndex] = useState(0);

    useEffect(() => {
        setIndex((prevIndex) =>
            prevIndex === items.length - 1 ? 0 : prevIndex   1
        )
    }, []);

    const handlePrev = e => {
        console.log(index)
        setIndex((prevIndex) =>
            prevIndex === items.length - 1 ? 0 :  prevIndex - 1
        )
    }

    const handleNext = e => {
        console.log(index)
        setIndex((prevIndex) => 
            prevIndex === items.length - 1 ? 0 : prevIndex   1
        )
    }

    return (
        <div className="slideshow">
        <div
            className="slideshowSlider"
            style={{ transform: `translate3d(${-index * 100}%, 0, 0)` }}
        >
            {items.map((backgroundColor, index) => (
            <div
                className="slide"
                key={index}
                style={{ backgroundColor:colors[index] }}
            ></div>
            ))}
        </div>
        
        <div className="next-prev">
                <div className="prev" onClick={e => handlePrev(e)}> <ion-icon name="chevron-back-outline"></ion-icon> </div>
                <div className="next" onClick={e => handleNext(e)}> <ion-icon name="chevron-forward-outline"></ion-icon> </div>
        </div>

        <div className="slideshowDots">
            {items.map((_, idx) => (
            <div
                key={idx}
                className={`slideshowDot${index === idx ? " active" : ""}`}
                onClick={() => {
                setIndex(idx);
                }}
            ></div>
            ))}
        </div>
        </div>
    );
}

export default Slider

所以基本上我所說的是，當我試圖點擊下一個按鈕時..它不會跳過任何頁面但是當我試圖點擊上一個時它不能正常作業。你可以在你的 vscode 中試試這個。這是css代碼

.slideshow {
    margin: 0 auto;
    overflow: hidden;
    max-width: 500px;
  }
  
  .slideshowSlider {
    white-space: nowrap;
    transition: ease 1000ms;
  }
  
  .slide {
    display: inline-block;
    height: 400px;
    width: 100%;
    border-radius: 40px;
  }
  
  /* Buttons */
  
.next-prev {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 35px;
}

.next,.prev {
    background: beige;
    cursor: pointer;
}

  .slideshowDots {
    text-align: center;
  }
  
  .slideshowDot {
    display: inline-block;
    height: 20px;
    width: 20px;
    border-radius: 50%;
  
    cursor: pointer;
    margin: 15px 7px 0px;
  
    background-color: #c4c4c4;
  }
  
  .slideshowDot.active {
    background-color: #6a0dad;
  }

我相信這段代碼存在邏輯問題

    const handlePrev = e => {
        console.log(index)
        setIndex((prevIndex) =>
            prevIndex === items.length - 1 ? 0 :  prevIndex - 1
        )
    }

我試圖用 prevIndex - 1 來做，因為我認為它可能有效，但它跳過了頁面的中間部分。

任何人都可以幫助我，謝謝。

uj5u.com熱心網友回復：

您的 prev 邏輯被反轉，條件應與第一個索引進行比較，如果為真，則將其設定為最后一個索引

setIndex((prevIndex) =>
  prevIndex === 0 ? items.length - 1 : prevIndex - 1
);

標籤：反应 动画片 滑块

上一篇：我希望這個影片能在頁面上停留幾秒鐘然后消失

下一篇：有沒有辦法在python中分別獲取變數中的字串和整數？