움직이는 이미지 슬라이드에 양쪽에 버튼과 하단에 닷 메뉴를 넣었습니다.
양쪽 버튼을 누르면 방향따라 이미지가 넘어가고 하단의 점을 누르면 해당 순서의 이미지로 바뀝니다.
HTML
<!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>06. 슬라이드 이펙트</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/slider.css">
</head>
<body class="img06 bg06 font06">
<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/sliderEffect01-min.jpg" alt="이미지1"></div>
<div class="slider s2"><img src="./img/sliderEffect03-min.jpg" alt="이미지2"></div>
<div class="slider s3"><img src="./img/sliderEffect05-min.jpg" alt="이미지3"></div>
<div class="slider s4"><img src="./img/sliderEffect07-min.jpg" alt="이미지4"></div>
<div class="slider s5"><img src="./img/sliderEffect09-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-->
</body>
</html>
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;
line-height: 50px;
text-align: center;
background-color: rgb(240, 251, 218);
transition: all 0.3s ease;
}
.slider__btn a:hover {
border-radius: 50%;
background-color: #d87cef;
color: #fff;
}
.slider__btn a.prev {
left: 0;
}
.slider__btn a.next {
right: 0;
}
.slider__dot {
position: absolute;
left: 50%;
bottom: 30px;
transform: translateX(-50%);
}
.slider__dot .dot {
width: 20px;
height: 20px;
background-color: rgba(225,225,225,0.3);
display: inline-block;
border-radius: 50%;
text-indent: -9999px;
transition: all 0.3s;
margin: 2px;
}
.slider__dot .dot.active {
background-color: rgba(225,225,225,1);
}
</style>
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 = 2000; // 이미지 변경 간격 시간
let sliderWidth = slider[0].offsetWidth; // 이미지 가로값
let dotIndex = "";javascript
function init(){
// 이미지 갯수만큼 닷 메뉴 생성
slider.forEach(() => dotIndex += "<a href='#' class='dot'>이미지</a>");
sliderDot.innerHTML = dotIndex;
// 첫번째 닷 메뉴한테 활성화 표시하기
sliderDot.firstChild.classList.add("active");
// 닷 메뉴 클릭해서 이미지 바꾸기
let dotActive = document.querySelectorAll(".slider__dot .dot");
dotActive.forEach((btn, index) => {
btn.addEventListener("click", () => {
gotoSlider(index);
});
});
}
init();
slider.forEach()를 사용하여 slider 이미지의 갯수만큼 반복하면서 dotIndex 변수에 "<a href='#' class='dot'>이미지</a>"를 추가합니다.
sliderDot.firstChild.classList.add("active");를 사용하여 첫 번째 닷 메뉴 요소에 "active" 클래스를 추가하여 활성화 표시를 합니다.
닷 메뉴를 클릭하여 이미지를 변경할 수 있도록 이벤트를 등록합니다.
dotActive.forEach()를 사용하여 각 요소에 대해 이벤트 리스너를 등록합니다.
btn.addEventListener()를 사용하여 각 닷 메뉴 요소에 클릭 이벤트를 추가하고, gotoSlider(index) 함수를 호출합니다. gotoSlider() 함수는 클릭한 닷 메뉴에 해당하는 이미지를 보여주는 함수입니다.
// 이미지 이동시키기
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");
}sliderInner.style.transition = "all 400ms";을 사용하여 이미지 슬라이더의 이동 애니메이션 속도를 지정합니다.
이미지 슬라이더의 너비(sliderWidth)를 이용하여 sliderInner 요소를 지정된 num에 해당하는 이미지로 이동시킵니다.
이동 거리는 sliderWidth와 num을 곱한 값을 음수로 변환한 것입니다.
currentIndex 변수 값을 num으로 변경합니다.
currentIndex 변수는 현재 표시되는 이미지의 번호를 저장합니다.
querySelectorAll() 함수를 사용하여 .slider__dot .dot 클래스를 가진 모든 요소를 갸져와서 dotActive라는 변수에 저장합니다.
forEach() 함수를 사용하여 dotActive의 모든 요소에서 active 클래스를 제거한 후, num 번째 항목에 active 클래스를 추가합니다. active 클래스는 활성화된 항목에 대해 스타일을 적용하기 위해 사용됩니다.
// 버튼을 클릭했을 때
sliderBtn.forEach((btn, index) => {
btn.addEventListener("click", () => {
let prevIndex = (currentIndex + (sliderCount-1)) % sliderCount;
let nextIndex = (currentIndex + 1) % sliderCount; //1 2 3 4 0 1 2 3 4
if(btn.classList.contains("prev")){
gotoSlider(prevIndex);
} else {
gotoSlider(nextIndex);
}
});
});sliderBtn 변수에는 이전 버튼과 다음 버튼의 요소가 저장되어 있습니다.
forEach문을 사용하여 그 안에 클릭 이벤트 등록을 해줍니다.
이전 버튼(prev)을 클릭한 경우, 현재 표시되는 이미지의 바로 이전 이미지의 인덱스를 prevIndex 변수에 저장합니다.
다음 버튼(next)을 클릭한 경우, 현재 표시되는 이미지의 바로 다음 이미지의 인덱스를 nextIndex 변수에 저장합니다.
sliderCount는 이미지의 총 갯수이며, % 연산자를 사용하여 배열의 범위를 벗어나지 않도록 합니다.
prev 버튼 또는 next 버튼을 클릭한 경우, gotoSlider() 함수를 호출하여 prevIndex 또는 nextIndex에 해당하는 이미지로 슬라이더를 이동시킵니다. 이동한 후, currentIndex 변수를 업데이트합니다.