이미지 슬라이드 - 버튼 추가
<main>
<section id="sliderType05">
<div class="slider__wrap">
<div class="slider__img">
<div class="slider__inner">
<div class="slider"><img src="img/img01.jpg" alt="이미지1"></div>
<div class="slider"><img src="img/img02.jpg" alt="이미지2"></div>
<div class="slider"><img src="img/img03.jpg" alt="이미지3"></div>
<div class="slider"><img src="img/img04.jpg" alt="이미지4"></div>
<div class="slider"><img src="img/img05.jpg" alt="이미지5"></div>
</div>
</div>
<div class="slider__btn">
<a href="#" class="prev">prev</a>
<a href="#" class="next">next</a>
</div>
</div>
</section>
</main>
@import url(css/NexonLv1Gothic.css); /* 폰트.css */
@import url(css/androidstudio.min.css); /* highlight.css */
@import url(css/custom.css); /* custom.css */
/* slider */
.slider__wrap {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.slider__img { /* 화면 보이는 구간 */
width: 800px;
height: 480px;
overflow: hidden;
}
.slider__inner { /* 이미지 움직이는 영역 */
display: flex;
width: 4000px; /* 이미지 총 길이 */
transform: translateX(0);
}
.slider {
width: 800px;
position: relative;
}
.slider::before {
position: absolute;
left: 5px;
top: 5px;
background: rgba(0,0,0,0.4);
color: #fff;
padding: 5px 10px 3px;
}
.slider:nth-child(1)::before {content: "이미지1"}
.slider:nth-child(2)::before {content: "이미지2"}
.slider:nth-child(3)::before {content: "이미지3"}
.slider:nth-child(4)::before {content: "이미지4"}
.slider:nth-child(5)::before {content: "이미지5"}
.slider__btn a {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 50px;
background: rgba(0,0,0,0.4);
text-align: center;
line-height: 50px;
transition: all 0.2s;
display: block;
color: #fff;
text-decoration: none;
}
.slider__btn a.prev {
left: 0;
}
.slider__btn a.next {
right: 0;
}
.slider__btn a:hover {
background: rgb(241,96,86);
}
highlightAll(); //highlight.js에 저장된 함수 highlightAll 실행
modal(); //custom.js에 저장된 함수 modal 실행
tabMenu(); //tabMenu.js에 저장된 함수 modal 실행
//sliderType05
const sliderWrap = document.querySelector(".slider__wrap"); //.slider__wrap을 변수(sliderWrap)에 저장
const sliderImg = document.querySelector(".slider__img"); //.slider__img를 변수(sliderImg)에 저장 //이미지 보이는 영역
const sliderInner = document.querySelector(".slider__inner"); //.slider__inner를 변수(sliderInner)에 저장 //이미지 움직이는 영역
const slider = document.querySelectorAll(".slider"); //.slider를 변수(slider)에 저장 //5개의 이미지
const sliderBtn = document.querySelector(".slider__btn"); //.slider__btn을 변수(sliderBtn)에 저장 //버튼들 부모 박스
const sliderBtnPrev = sliderBtn.querySelector(".prev"); //.prev 변수(sliderBtnPrev)에 저장 //이전 버튼
const sliderBtnNext = sliderBtn.querySelector(".next"); //.next 변수(sliderBtnNext)에 저장 //다음 버튼
let currentIndex = 0; //첫번쨰 이미지 //현제 보이는 이미지
let sliderCount = slider.length; //이미지 갯수
let sliderWidth = sliderImg.offsetWidth; //이미지 가로 값
function gotoSlider(num){ //함수(gotoSlider) 선언
sliderInner.style.transition = "all 400ms"; //애니메이션 속도 설정
sliderInner.style.transform = "translateX(" + -sliderWidth * num + "px)"; //위치 설정
// currentIndex--;
// currentIndex++;
currentIndex = num; //(num-1)번째 보이는 이미지 //변경된 이미지 순서 저장
//console.log(currentIndex) //이미지 순서 확인
}
sliderBtnPrev.addEventListener("click", () => { //이전 버튼 클릭
let prevIndex = (currentIndex + sliderCount -1) % sliderCount; //변수(prevIndex)가 특정숫자(0,1,2,3,4) 한정으로 1씩 감소하도록 저장
gotoSlider(prevIndex); //함수(gotoSlider)에 변수(prevIndex) 실행
})
sliderBtnNext.addEventListener("click", () => { //다음 버튼 클릭
let nextIndex = (currentIndex + 1) % sliderCount; //변수(prevIndex)가 특정숫자(0,1,2,3,4) 한정으로 1씩 증가하도록 저장
gotoSlider(nextIndex); //함수(gotoSlider)에 변수(nextIndex) 실행
})