이미지 슬라이드 - 버튼 추가, 닷 버튼 추가
<main>
<section id="sliderType01">
<div class="slider__wrap">
<div class="slider__img">
<div class="slider__inner">
<div class="slider"><img src="../img/img6.jpg" alt="이미지1"></div>
<div class="slider"><img src="../img/img7.jpg" alt="이미지2"></div>
<div class="slider"><img src="../img/img8.jpg" alt="이미지3"></div>
<div class="slider"><img src="../img/img9.jpg" alt="이미지4"></div>
<div class="slider"><img src="../img/img10.jpg" alt="이미지5"></div>
</div>
</div>
</div>
</section>
</main>highlight(); //외부 스크립트 함수 (highlight)호출
modal(); //외부 스크립트 함수 (modal, 소스보기 창)호출
tabMenu(); //외부 스크립트 함수 (tabMenu, 소스보기의 탭 메뉴)호출
// slider03
const sliderWrap = document.querySelector(".slider__wrap"); //sliderWrap에 div 태그 .slider__wrap 저장
const sliderImg = document.querySelector(".slider__img"); //sliderImg에 div 태그 .slider_img 저장, 이미지 한 칸만 보이는 영역
const sliderInner = document.querySelector(".slider__inner"); //이미지 움직이는 영역
const slider = document.querySelectorAll(".slider"); //slider에 div 태그 .slider (최종적으로 이미지를 담는 다섯개의 div)
const sliderBtn = document.querySelector(".slider__btn");
const sliderDot = document.querySelector(".slider__dot");
let currentIndex = 0;
let sliderCount = slider.length; //이미지 갯수
let sliderWidth = sliderImg.offsetWidth; //이미지 가로 값
let dotIndex = ""; //이미지 갯수에 따라 닷 생성하기 위한 문자열
let dotActive; //class="active"추가/제거를 위한 변수
//초기화 함수, 시작하자마자 실행하는 함수
function init() {
//이미지 갯수만큼 추가
slider.forEach(() => { //slider의 크기만큼 dotIndex문자열에 태그 추가된다.
dotIndex += ``;
});
sliderDot.innerHTML = dotIndex; //sliderDot에 dotIndex문자열 삽입, 이미지 갯수 만큼 dot버튼이 생성된다.ㅏ
//첫번째 닷 번튼한테 활성화 표시(active)
sliderDot.firstElementChild.classList.add("active"); //페이지 처음 로드 시 첫번째 dot버튼에는 class="active" 추가시킴
}
init(); //초기화 함수 호출
function gotoSlider(num) {
sliderInner.style.transition = "all 400ms"; //0.4초
sliderInner.style.transform = `translateX(-${sliderWidth * num}px)`; //-800만큼 움직인다.
currentIndex = num; //currentIndex 동기화
dotActive = document.querySelectorAll(".slider__dot .dot"); //dotActive 변수에 초기화 함수에서 생성된 a.dot태그를 저장한다.
dotActive.forEach(el => {
el.classList.remove("active"); //a.dot에 있는 class="active" 모두 삭제
});
dotActive[num].classList.add("active"); //매개변수로 받은 num(현재인덱스값)과 같은 순서에 있는 a.dot에 class="active"추가
}
document.querySelectorAll(".slider__btn a").forEach((btn, index) => { //prev,next버튼
btn.addEventListener("click", () => { //prev나 next버튼이 눌리면
let prevIndex = (currentIndex + (sliderCount - 1)) % sliderCount; //prevIndex에는 currentIndex보다 1을 뺀 값이 들어간다. currentIndex가 0일 경우 4가 들어간다.
let nextIndex = (currentIndex + 1) % sliderCount; //nextIndex에는 currentIndex보다 1을 더한 값이 들어간다. currentIndex가 4일 경우 0이 들어간다.
if (btn.classList.contains("prev")) { //클릭한 버튼이 prev여서 class="prev"가 포함되어있으면
gotoSlider(prevIndex); //매개변수로 prevIndex(현재 인덱스보다 -1한 번호)가 들어가서 이미지전환/dot버튼에 active 활성화 변경
} else {
gotoSlider(nextIndex); //클릭한 버튼이 next면 매개변수로 nextIndex(현제 인덱스 + 1)전달되어 이미지전환/dot버튼에 active활성화 변경
}
})
});
document.querySelectorAll(".slider__dot .dot").forEach((dot, index) => {
dot.addEventListener("click", () => { //클릭한 dot버튼인덱스를 gotoSlider함수의 매개변수에 전달하여 이미지전환/dot버튼 active 활성화 변경
gotoSlider(index);
})
})