...
728x90
반응형
버튼을 눌렀을 때 넘어가는 슬라이드 효과 만들기
이번에는 버튼을 눌렀을 때 이미지가 좌 혹은 우로 넘어가도록 만들어보겠습니다.
HTML 작성하기
<main id="main">
<div class="slider__wrap">
<div class="slider__img">
<div class="slider__inner">
<div class="slider s1"><img src="img/sliderEffect06-min.jpg" alt="이미지6"></div>
<div class="slider s2"><img src="img/sliderEffect07-min.jpg" alt="이미지7"></div>
<div class="slider s3"><img src="img/sliderEffect08-min.jpg" alt="이미지8"></div>
<div class="slider s4"><img src="img/sliderEffect09-min.jpg" alt="이미지9"></div>
<div class="slider s5"><img src="img/sliderEffect10-min.jpg" alt="이미지10"></div>
</div>
</div>
<div class="slider__btn">
<a href="#" class="prev" title="이전이미지">prev</a>
<a href="#" class="next" title="다음이미지">next</a>
</div>
<div class="slider__dot">
</div>
</div>
</main>추가된 html 알아보기
- 이미지의 기본틀을 동일합니다.
- 이미지의 좌 우에 버튼을 만들기 위해 slider__btn의 부분을 만들어 주었습니다.
- 페이지의 하단에 dot메뉴를 만들기 위해 slider__dot의 부분을 만들어 주고,
- 스크립트를 통해 이미지의 개수와 동일하게 dot을 만들어 줄 것이기 때문에 html의 구조상에는 아무것도 넣지 않았습니다.
CSS 작성하기
.slider__btn a {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
/* background-color: #fff; */
color: #fff;
transition: all 0.2s;
font-weight: bold;
}
.slider__btn a:hover {
border-radius: 50%;
background-color: #000;
color: #fff;
}
.slider__btn a.prev {
left: 0;
}
.slider__btn a.next {
right: 0;
}
.slider__dot {
position: absolute;
left: 50%;
bottom: 40px;
transform: translateX(-50%);
}
.slider__dot .dot {
width: 15px;
height: 15px;
background-color: rgba(255, 255, 255, 0.4);
display: inline-block;
border-radius: 50%;
text-indent: -9999px;
transition: all 0.3s;
margin: 5px;
}
.slider__dot .dot.active {
background-color: #fff;
}추가된 CSS 정리해보기
- slider__btn과 slider__dot, 스크립트로 받아 오게 될 dot에 대한 스타일 속성을 추가하였습니다.
- 현재 표시되고 있는 이미지의 index와 같은 dot의 색을 다르게 하기위해 active 클래스가 붙은 dot에 대한 속성도 미리 만들어 주었습니다.
Javasciprt 작성하기
// 선택자
const sliderWrap = document.querySelector(".slider__wrap");
const sliderImg = sliderWrap.querySelector(".slider__img"); // 보여지는 영역
const sliderInner = sliderWrap.querySelector(".slider__inner"); // 윰직이는 영역
const slider = sliderWrap.querySelectorAll(".slider"); // 개별 이미지
const sliderDot = sliderWrap.querySelector(".slider__dot"); // 닷 메뉴
const sliderBtn = sliderWrap.querySelectorAll(".slider__btn a");// 버튼
let currentIndex = 0; // 현재 보이는 이미지
let sliderCount = slider.length; // 전체 이미지 개수
let sliderWidth = slider[0].clientWidth; // 이미지 width값
let dotIndex = "";
let sliderInterval = 2000;
// 복사한 첫 번째 이미지 마지막에 붙여넣기
function init(){
// 이미지 개수만큼 닷 메뉴 생성
slider.forEach(() => dotIndex += "<a href='#' class='dot'>이미지</a>");
sliderDot.innerHTML = dotIndex;
// 첫 번째 닷 메뉴한테 활성화 표시
sliderDot.firstChild.classList.add("active");
};
init();
// 이미지 이동시키는 함수
function gotoSlider(num){
sliderInner.style.transition = "all 400ms";
sliderInner.style.transform = "translateX(" + -sliderWidth * num + "px)";
currentIndex = num;
// 닷 메뉴에 불 들어오게 만들기
let dotActive = document.querySelectorAll(".slider__dot .dot");
dotActive.forEach((active) => active.classList.remove("active"));
dotActive[num].classList.add("active");
};
function btnClick(){
let dotActive = document.querySelectorAll(".slider__dot .dot");
dotActive.forEach((btn, index) => {
btn.addEventListener("click", () => {
gotoSlider(index);
});
});
};
btnClick();
// 버튼을 클릭했을 때
sliderBtn.forEach((btn, index) => {
btn.addEventListener("click", () => {
let prevIndex = (currentIndex + sliderCount-1) % sliderCount;
let nextIndex = (currentIndex+1) % sliderCount;
if(btn.classList.contains("prev")){ // class에 prev가 있는지 확인
gotoSlider(prevIndex);
} else {
gotoSlider(nextIndex);
};
});
});Javscript 정리해보기
- 선택자 목록에 slider__dot과 slider__btn의 a태그를 선택하는 선택자 sliderDot과 sliderBtn을 추가했습니다.
- dotIndex 변수를 만들었습니다.
- init() 함수
- slider에 forEach를 사용하여 slider에 있는 요소의 개수 만큼 반복합니다.
- dotIndex에 "<a href='#' class='dot'>이미지</a>"의 내용을 추가해서 저장합니다. (slider 요소 개수만큼)
- sliderDot에 innerHTML을 사용하여 dotIndex를 적어줍니다.
- sliderDot의 첫 번째 요소의 classList에 "active"를 추가합니다.
- gotoSlider(num) 함수
- sliderInner의 변화에 대한 시간을 400ms로 설정합니다.
- sliderInner를 X축으로 (-sliderWidth * num)px 만큼 움직입니다.
- currentIndex에 num의 값을 저장합니다.
- slider__dot에 만들어놓은 각각의 dot을 선택하는 dotActive를 만들어줍니다.
- dotActive에 forEach를 사용하여 모든 요소에게서 "active" class를 제거합니다.
- [num] 번째 dotActive의 classList에 "active"를 추가합니다.
- btnClick() 함수
- 다시 한번 dotActive를 만들어줍니다.
- dotActive에 forEach를 사용하여 각 요소들에게 addEventListener를 통해 클릭 했을 때,
- gotoSlider함수의 매개변수로 각 dot들의 index를 보내며 실행합니다.
- sliderBtn( prev, next )에 forEach를 사용합니다.
- prevIndex 변수를 만들어 (currentIndex + (sliderCount-1)) % sliderCount의 값을 저장합니다.
- (4 3 2 1 0 4 3 2 1 0 4 3 2 1 ...을 만듦)
- nextIndex 변수를 만들어 (currentIndex + 1) % sliderCount의 값을 저장합니다.
- if(btn(sliderBtn의 요소).classList.contains("prev") 를 통해 클릭 된 요소의 class에 prev가 있는지 확인합니다.
- {gotoSlider(prevIndex)} 참일 때, (classList에 "prev"가 있을 때 = prev 버튼을 눌렀을 때)
- else { gotoSlider(nextIndex)} 거짓일 때 (classList에 "prev"가 없을 때 = next 버튼을 눌렀을 때)
이상으로 닷 메뉴가 있는 버튼 형식의 슬라이드 효과를 만들어 보았습니다 !
728x90
반응형