ㅂ


저 이미지 슬라이드 작동하는 부분만 코드 가져옴.


으악 이거 왜이러는거임


const [step, setStep] = useState<number>(1);
const [puase1, setpuase1] = useState<boolean>(true);

const autoplus = () => { //자동으로 step[사진번호]를 늘려서 다음 사진으로 넘겨줌
if (puase1 === false) {
setStep(step + 1);

if (step === 6) {
setStep(1);
}
}
console.log(step);
console.log(puase1);
};

let autoSlide = setInterval(autoplus, 1000); //1초에 자동슬라이드 1번씩 실행함

const playStop = () => { // playStop버튼 누르면 실행되는 함수
setpuase1(!puase1);
if (puase1 === true) { // puase1을 토글 해주고 true가 오면 인터벌 해제시킴
clearInterval(autoSlide);
}
if (puase1 === false) { // playstop 버튼을 한번 더 누르면 puase1가 토글되고 자동 넘기기 다시 실행
autoSlide;
}
};
return (
<div className="sliderContainder">
{autoSlide}
{/* {getId(arr1)} */}
<button className="leftarrow" onClick={handLeftArrow}>
ddd
</button>
<button className="rightarrow" onClick={handRightArrow}>
ddd
</button>
<div className="imagebox">
{step === 1 && <img src={img1} id="appleshow" alt="img1" />}
{step === 2 && <img src={img2} id="appleshow" alt="img2" />}
{step === 3 && <img src={img3} id="appleshow" alt="img3" />}
{step === 4 && <img src={img4} id="appleshow" alt="img4" />}
{step === 5 && <img src={img5} id="appleshow" alt="img5" />}
{step === 6 && <img src={img6} id="appleshow" alt="img6" />}
</div>
<button className="playStop" onClick={playStop}>
play&Stop
</button>
</div>
);





이건 autoplus에서

console.log(step);
console.log(puase1);


찍은사진임. 지멋대로 puase1이라고 멈춤 토글 변수도 막변하고있음


온클릭이벤트 받을때만 puase1이 바껴야되는대 지 멋대로 바뀜 ㅠㅠ