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
이미지 3장을 map으로 돌리기 위해 우선 임의로 bannerList state에 저장을 해둔다.
저장한 이미지를 map을 통해 나열해준다.
슬라이드 구현은 css의 transform에 translate를 사용할 것이고 inline style 형식으로 작성해준다.
(* styled component로 작성하려고 해도 onclick event 작동시 저장되는 데이터가 scope 바깥에 있으면 적용이 안 된다.)
이미지의 위치를 slide state에 저장해둔다.
onclick event를 화살표 이미지에 적용시켜서 화살표 click시 이미지가 좌우로 이동하게 한다.