이런식으로 구현을 해보았는데 치명적인 단점이 있다 .
사진의 범위를 넘어가면 사진이 나오지 않는데 이부분을 조금만 더 보안하면 될 것 같다
그리고 사진들의 파일 이름을 전부 같게 해주고 뒤에 숫자로 count를 하는식으로 구현을 해서 숫자 범위를 다시 정해주어야 겠다
코드는
function Thumbnail({source, alt}) {
const [count, setCount] = useState(2)
const handleClick = () => {
setCount(count +1)
}
const disHandleClick = () => {
setCount(count -1)
}
return (
<>
<Image src = {`${source}${count}.jpeg`} alt= {alt} className = 'thumbnail'/>
<PrevBtn onClick = {disHandleClick}>Prev</PrevBtn>
<NextBtn onClick = {handleClick}>Next</NextBtn>
</>
)
}
export default Thumbnail
export const Slide = ({theme}) => {
const [basicImages, setBasicImages] = useState(images[0])
return (
<Thumbnail source = {basicImages.src} alt = {basicImages.alt} key ={basicImages.id} theme= {theme} />
)
}
이렇게 구현을 해보았따