[React] 라이브러리 없이 Slide 구현하기

👇전체코드

import Bg1 from "../assets/images/bg.jpg"
import Bg2 from "../assets/images/google-logo.png"
import Bg3 from "../assets/images/modalclose.gif"
import Vector1 from "../assets/images/Vector.png"
import Vector2 from "../assets/images/Vector2.png"

function Banner() {
    const [bannerList, setBannerList] = useState([Bg1, Bg2, Bg3]) // 1번
    const [slide, setSlide] = useState(0) // 4번

    const handleSlidePrev = () => {
        if (slide !== 0) {
            setSlide(slide - 1)
        } else {
            setSlide(bannerList.length - 1)
        }
    } // 5번

    const handleSlideNext = () => {
        if (slide !== bannerList.length - 1) {
            setSlide(slide + 1)
        } else {
            setSlide(0)
        }
    } // 5번


    return (
        <BannerContainer>
            <img src={Vector1} className="swiper1" alt="" onClick={handleSlidePrev} /> // 5번
           <Slide style={{ transform: `translateX(-${1920 * slide}px)` }}> // 3번
                {bannerList.map((b, i) => {  // 2번
                    return <li key={i}>
                        <img src={b} alt="" />
                    </li>
                })}
            </Slide>
            <img src={Vector2} className="swiper2" alt="" onClick={handleSlideNext} /> // 5번
            <ul className="dot-container" >
                {bannerList.map((d, i) => {
                    return <li key={i} className={`dot ${slide === i ? "on" : ""}`}></li>
                })}
            </ul>
        </BannerContainer>
    )
}

const BannerContainer = styled.div`
    width: 100%;
    position: relative;
    overflow-x: hidden;
    overflow-y: hidden;
   .swiper1 {
    z-index: 1;
    position: absolute;
    top: 230px;
    left: 30px;
    cursor: pointer;
   }
   .swiper2 {
    right: 60px;
    bottom: 240px;
    position: absolute;
    cursor: pointer;
   }
   .dot-container {
    position: absolute;
    width: 100%;
    display: flex;
    bottom: 25px;
    left: 50%;
}
.dot {
    width: 6px;
    height: 6px;
    background-color: white;
    border-radius: 3px;
    margin-right: 6px;
}
.on{
    background-color: black;
}
`

const Slide = styled.ul`
    width: 100%;
    height: 500px;
    display: flex;
    li {
        img {
            width:1920px;
            height: 500px;
        }
    }
`

export default Banner

👇코드해설

1. 이미지 3장을 map으로 돌리기 위해 우선 임의로 bannerList state에 저장을 해둔다.

2. 저장한 이미지를 map을 통해 나열해준다.

3. 슬라이드 구현은 css의 transform에 translate를 사용할 것이고 inline style 형식으로 작성해준다.
   (* styled component로 작성하려고 해도 onclick event 작동시 저장되는 데이터가 scope 바깥에 있으면 적용이 안 된다.)

4. 이미지의 위치를 slide state에 저장해둔다.

5. onclick event를 화살표 이미지에 적용시켜서 화살표 click시 이미지가 좌우로 이동하게 한다.

• 이미지가 1920px씩 이동하게 하고 이동해야할 위치의 값은 1920px을 기준으로 slide값(위치값)을 곱해서 그 값을 이동시킨다.
• ex) 처음의 위치는 0이고 오른쪽으로 이동하는 화살표를 클릭했을시, slide 값은 1이 되고 $1920\times1$이기 때문에 -1920px만큼 이동하게 된다. 그리고 이동한 위치는 1이되고 다시 오른쪽으로 이동 버튼을 클릭하면 slide는 2가 되고 $1920\times2$가 되고 -3840px씩 이동하게된다. 그리고 마지막사진까지 이동하게 되면 현재이미지 리스트(bannerList)길이에서 -1한 것과 slide 값이 같을시 slide 값을 0으로 설정해뒀기 때문에 처음 이미지로 이동하게 한다.