이미지 슬라이드 - 닷 버튼 추가
<main>
<section id="sliderType06">
<div class="slider__wrap">
<div class="slider__img">
<div class="slider__inner">
<div class="slider"><img src="img/img06.jpg" alt="이미지1"></div>
<div class="slider"><img src="img/img07.jpg" alt="이미지2"></div>
<div class="slider"><img src="img/img08.jpg" alt="이미지3"></div>
<div class="slider"><img src="img/img09.jpg" alt="이미지4"></div>
<div class="slider"><img src="img/img10.jpg" alt="이미지5"></div>
</div>
</div>
<div class="slider__btn">
<a href="#" class="prev">prev</a>
<a href="#" class="next">next</a>
</div>
<div class="slider__dot"></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);
}
.slider__dot {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 20px;
}
.slider__dot .dot {
width: 20px;
height: 20px;
background: rgba(0,0,0,0.4);
display: inline-block;
border-radius: 50%;
transition: all 0.3s;
margin: 3px;
}
.slider__dot .dot.active {
background: rgba(255,255,259,0.9);
}
highlightAll(); //highlight.js에 저장된 함수 highlightAll 실행
modal(); //custom.js에 저장된 함수 modal 실행
tabMenu(); //tabMenu.js에 저장된 함수 modal 실행
//sliderType06
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 sliderDot = document.querySelector(".slider__dot"); //slider__dot을 변수(sliderDot)에 저장 //닷 버튼들 부모 박스
let currentIndex = 0; //첫번쨰 이미지 //현제 보이는 이미지
let sliderCount = slider.length; //이미지 갯수
let sliderWidth = sliderImg.offsetWidth; //이미지 가로 값
let dotIndex = ""; //닷 버튼
let dotActive; //보이는 이미지의 닷 버튼
//초기값 설정
function init(){ //함수(init) 선언
slider.forEach(() => dotIndex += ""); //이미지 갯수 만큼 닷 버튼 저장
sliderDot.innerHTML = dotIndex; //저장 된 닷 버튼을 문서에 표현
sliderDot.firstElementChild.classList.add("active") //첫 번째 닷 버튼한테 활성활 표시(active)
}
init(); //함수(init) 실행
function gotoSlider(num){ //함수(gotoSlider) 선언 //매게변수(num) 입력
sliderInner.style.transition = "all 400ms"; //애니메이션 속도 설정
sliderInner.style.transform = "translateX(" + -sliderWidth * num + "px)"; //위치 설정
currentIndex = num; //(num-1)번째 보이는 이미지 //변경된 이미지 순서 저장
dotActive = document.querySelectorAll(".slider__dot .dot"); //"변수(dotActive)를 .slider__dot .dot"로 변경
//반복문 : 변수(dotActive)의 모든 배열에 클레스(active) 제거
dotActive.forEach(el => {
el.classList.remove("active");
})
dotActive[num].classList.add("active") //num번째 배열에 클레스(active) 추가
}
//반복문 : .slider__btn a을 클릭했을 떄 실행
document.querySelectorAll(".slider__btn a").forEach((btn, index) => {
btn.addEventListener("click", () => {
let prevIndex = (currentIndex + sliderCount -1) % sliderCount; //변수(prevIndex)가 특정숫자(0,1,2,3,4) 한정으로 1씩 감소하도록 저장
let nextIndex = (currentIndex + 1) % sliderCount; //변수(prevIndex)가 특정숫자(0,1,2,3,4) 한정으로 1씩 증가하도록 저장
//조건문 : 클레스가 prev인 경우 실행
if(btn.classList.contains("prev")){
gotoSlider(prevIndex); //함수(gotoSlider)에 변수(prevIndex) 실행
} else {
gotoSlider(nextIndex); //함수(gotoSlider)에 변수(nextIndex) 실행
}
})
})
//반목문 : .slider__dot .dot을 클릭했을 떄 실행
document.querySelectorAll(".slider__dot .dot").forEach((dot,index) => {
dot.addEventListener("click", () => {
gotoSlider(index); //함수(gotoSlider)에 변수(index) 실행
})
})