为什么我的滑块不能正常向后工作

Question

所以我有下一个和上一个按钮，下一个按钮工作得很好但上一个按钮没有。这是代码。

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 来做，因为我认为它可能有效，但它跳过了页面的中间部分。

谁能帮帮我谢谢。

Answer 1

你的prev逻辑是倒置的，条件应该与第一个索引进行比较，如果为真，则将其设置为最后一个索引

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

为什么我的滑块不能正常向后工作

Why my slider don't work properly backwards

animation

slider

reactjs