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);
}