sliderEffect6만들기
이번에는 사진을 움직이는 버튼과 아래 이미지 갯수만큼 닷을 만들어 닷마다 이미지로 이동할 수 있도록 만들어 보겠습니다.
코드블럭
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>마우스이펙트</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/slider.css">
<style>
/* slider_wrap */
.slider__wrap{
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.slider__img{ /* 이미지가 보이는 영역 */
position: relative;
width: 800px;
height: 450px;
overflow: hidden;
}
.slider__inner { /* 전체 이미지를 감싸고 있는 부모 : 움직이는 영역 */
display: flex;
flex-wrap: wrap;
width: 4800px; /* 총 이미지 4800px */
height: 450px;
}
.slider { /* 개별적인 이미지 */
position: relative;
width: 800px;
height: 450px;
}
.slider__btn a{
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 50px;
background-color: #bd8ede;
line-height: 50px;
text-align: center;
transition: all 0.6s
}
/* .slider__btn a {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
background-color: #bd8ede;
transition: all 0.2s ease;
} */
.slider__btn a.next {
right: 0;
}
.slider__btn a.prev {
left: 0;
}
.slider__dot {
position: absolute;
left: 50%;
bottom: 50px;
transform: translateX(-50%);
}
.slider__dot .dot {
width: 20px;
height: 20px;
background-color: rgba(255, 255, 255, 0.4);
display: inline-block;
border-radius: 50%;
text-indent: -9999px;
transition: all 0.3s;
margin: 3px;
}
.slider__dot .dot.active {
background-color: rgba(255, 255, 255, 1.2);
}
</style>
</head>
<body class="img06 bg06 font02">
<header id="header">
<h1>Javascript Slider Effect06</h1>
<p>슬라이드 이펙트: 좌로 움직이기(연속적으로)</p>
<ul>
<li><a href="sliderEffect01.html">1</a></li>
<li><a href="sliderEffect02.html">2</a></li>
<li><a href="sliderEffect03.html">3</a></li>
<li><a href="sliderEffect04.html">4</a></li>
<li><a href="sliderEffect05.html">5</a></li>
<li class="active"><a href="sliderEffect06.html">6</a></li>
<li><a href="sliderEffect07.html">7</a></li>
</ul>
</header>
<!--header -->
<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="이미지1"></div>
<div class="slider s2"><img src="img/sliderEffect07-min.jpg" alt="이미지2"></div>
<div class="slider s3"><img src="img/sliderEffect08-min.jpg" alt="이미지3"></div>
<div class="slider s4"><img src="img/sliderEffect09-min.jpg" alt="이미지4"></div>
<div class="slider s5"><img src="img/sliderEffect10-min.jpg" alt="이미지5"></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">
<!-- <a href="#" class="active dot">이미지1</a>
<a href="#" class="dot">이미지2</a>
<a href="#" class="dot">이미지3</a>
<a href="#" class="dot">이미지4</a>
<a href="#" class="dot">이미지5</a> -->
</div>
</div>
</main>
<!-- main -->
<footer id="footer">
<!-- <a href="mailto:lee3ll@naver.com">lee3ll@naver.com</a> -->
</footer>
<!--footer -->
<script>
//선택자
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 sliderInterval = 3000; //이미지 변경 간격시간(3초)
let sliderWidth = slider[0].offsetWidth; //이미지 가로값
let dotIndex = "";
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();
//버튼을 클릭했을 때 (다중이라 forEach)
sliderBtn.forEach((btn, index) => {
btn.addEventListener("click", () => {
let prevIndex = (currentIndex + (sliderCount-1)) % sliderCount; //0432104321
let nextIndex = (currentIndex+1) % sliderCount; //123401234
if(btn.classList.contains("prev")){
gotoSlider(prevIndex);
} else {
gotoSlider(nextIndex);
}
});
});
</script>
</body>
</html>보충설명
✨ init()는 일반적으로 초기화를 위한 함수입니다. 이 함수는 보통 애플리케이션의 시작 시점에서 실행되며, 필요한 초기 작업을 수행합니다. 아래는 init()함수가 할 수 있는 일입니다.
-애플리케이션의 설정을 읽고 파싱하여 내부 변수에 저장합니다.
-애플리케이션에서 사용할 전역 변수를 설정합니다.
-애플리케이션에서 사용할 리소스를 불러오거나 초기화합니다.
-애플리케이션에서 필요한 라이브러리를 불러옵니다.
✨dotIndex 변수를 초기화합니다.slider 배열의 각 요소마다 dotIndex 변수에 "<a href='#' class='dot'>이미지</a>" 문자열을 더합니다. 이렇게 하면, 이미지 갯수만큼 닷 메뉴가 생성됩니다. sliderDot 요소의 내용을 dotIndex로 설정합니다. sliderDot은 HTML에서 닷 메뉴를 표시할 영역의 요소입니다. sliderDot의 첫 번째 자식 요소에 active 클래스를 추가하여 첫 번째 닷 메뉴를 활성화합니다.
✨sliderBtn이라는 버튼 요소들에 대한 이벤트를 등록해줍니다. 이벤트 핸들러는 클릭 이벤트를 감지하고, 이전 또는 다음 이미지 슬라이더로 이동하는 함수인 gotoSlider()를 호출합니다.
sliderBtn 배열의 각 버튼 요소마다, 클릭 이벤트를 감지하는 이벤트 핸들러를 등록합니다.
이벤트 핸들러에서는, 현재 인덱스를 기준으로 이전(prev)과 다음(next) 이미지 슬라이더의 인덱스를 계산합니다. sliderCount는 전체 이미지 슬라이더의 갯수를 나타냅니다.
버튼 요소가 prev 클래스를 가지고 있으면, prevIndex로 gotoSlider() 함수를 호출합니다. 그렇지 않으면 nextIndex로 호출합니다.
✨ 이미지 슬라이더의 닷 메뉴를 클릭했을 때, 해당 이미지 슬라이더로 이동하는 이벤트 핸들러를 등록하는 함수인 btnClick()와, 현재 활성화된 닷 메뉴를 갱신하는 함수인 dotActive()를 구현해 줍니다..
코드의 내용은 다음과 같습니다:
dotActive 변수를 선언하고, 현재 활성화된 닷 메뉴를 나타내는 HTML 요소들을 선택합니다.
dotActive 배열의 각 요소마다 active 클래스를 제거합니다.
인자로 전달된 num 값에 해당하는 닷 메뉴에 active 클래스를 추가합니다. num은 이미지 슬라이더의 인덱스를 나타냅니다.
btnClick() 함수에서도 dotActive 변수를 선언하고, 모든 닷 메뉴 요소에 클릭 이벤트를 등록합니다.
클릭 이벤트 핸들러에서는, 클릭한 닷 메뉴의 인덱스를 기준으로 gotoSlider() 함수를 호출합니다.