const PictureBox = () => {
    **this is an array of pictures**
    const allPictures = [
        { before: Sofa1, after: Sofa2 },
        { before: Sofa1, after: Sofa2 },
        { before: Sofa1, after: Sofa2 },
        { before: Sofa1, after: Sofa2 }
    ];
   
    **setting the state**
    const [x, setX] = useState(0)

    **functions that slide left and right based on the state**
    const goLeft = () => {
        x === 200 * (allPictures.length - 1) ? setX(0) : setX(x + 200)
        x === 200 * (allPictures.length - 1) ? setX(0) : setX(x + 200)
    }
    const goRight = () => {
        x === 0 ? setX(200 * (allPictures.length - 1)) : setX(x - 200)
        x === 0 ? setX(200 * (allPictures.length - 1)) : setX(x - 200)
    }

    return (
        <div className="slider"  >
            <div>
                 {allPictures.map((img, index) => {
                return (
                   
                    <div className="slide" style={{ transform:`translateX(${x}%)`}} key={index}>
                        <img src={img.before}  alt="hello" height='100%' width='50%' />
                        <img src={img.after}  alt="hello" height='100%' width='50%' />
                    </div>
                )
            })}
            </div>
           
            <button id='goleft' onClick={goLeft}>left</button>
            <button id='goright' onClick={goRight} >right</button>
        </div>
    )
}


export default PictureBox;

样式:

.slider {
    height: 450px;
    min-width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    position: relative;
    display: flex;
    flex-direction: row;
    flex: 1;
    border-radius: 12px; 
    /* overflow: hidden; */
}

.slide {
    min-width: 100%;
    height: 100%; 
    transition: 0.5s;
    box-sizing: border-box; 
    border: 1px double skyblue;
    background: rgb(2, 67, 95);
}