728x90
Slider Effect만들기
이전버튼과 다음버튼을 이용하여 이미지를 바꿀수 있으며 썸네일을 눌렀을때 해당 이미지로 이동시켜주도록 만들어 보겠습니다.
코드블럭
<!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{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 800px;
height: 450px;
box-shadow: 0 50px 100px rgba(0, 0, 0, 0.4);
}
.slider__img {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.slider__img img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transform: scale(1.1);
transition: all 500ms ease-in-out;
}
.slider__img img.active {
opacity: 1;
transform: scale(1);
}
.slider__thumb {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, 150px);
width: 100px;
display: flex;
justify-content: center;
gap: 10px;
}
.slider__thumb img {
cursor: pointer;
border: 2px solid transparent;
}
.slider__thumb img.active {
border: 2px solid #fff;
}
.slider__btn a{
position: absolute;
top: 0;
width: 40px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 12px;
color: #fff;
background-color: rgba(0, 0, 0, 0.2);
transition: all 300ms ease-in-out;
}
.slider__btn a.next {
right: 0;
}
.slider__btn a:hover {
background-color: rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body class="img06 bg06 font02">
<header id="header">
<h1>Javascript Slider sliderEffect07</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><a href="sliderEffect06.html">6</a></li>
<li class="active"><a href="sliderEffect07.html">7</a></li>
</ul>
</header>
<!--header -->
<main id="main">
<div class="slider__wrap">
<div class="slider__img"></div>
<div class="slider__thumb"></div>
<div class="slider__btn">
<a href="#" class="prev" title="이전이미지">prev</a>
<a href="#" class="next" title="다음이미지">next</a>
</div>
</div>
</main>
<!-- main -->
<footer id="footer">
<a href="mailto:lee3ll@naver.com">lee3ll@naver.com</a>
</footer>
<!--footer -->
<script>
let images = [
"img/sliderEffect06-min.jpg",
"img/sliderEffect07-min.jpg",
"img/sliderEffect08-min.jpg",
"img/sliderEffect09-min.jpg",
"img/sliderEffect10-min.jpg"
];
function imageSlider(parent, images){
let currentIndex = 0;
//선택자
let slider = {
parent: parent,
images: parent.querySelector(".slider__img"),
thumnails: parent.querySelector(".slider__thumb"),
prevBtn: parent.querySelector(".slider__btn .prev"),
nextBtn: parent.querySelector(".slider__btn .next")
}
//이미지 출력하기
slider.images.innerHTML = images.map((image, index) => {
return `<img src="${image}" alt="이미지${index}">`;
}).join("");
//이미지 활성화(active)하기
let imageNodes = slider.images.querySelectorAll("img");
imageNodes[currentIndex].classList.add("active");
//썸네일 이미지 출력하기
slider.thumnails.innerHTML = slider.images.innerHTML;
//썸네일 활성화(active) 하기
let thumnailNodes = slider.thumnails.querySelectorAll("img");
thumnailNodes[currentIndex].classList.add("active");
//썸네일 이미지 클릭하기
for(let i=0; i<thumnailNodes.length; i++){
thumnailNodes[i].addEventListener("click", function(){
slider.thumnails.querySelector("img.active").classList.remove("active");
thumnailNodes[i].classList.add("active");
imageNodes[currentIndex].classList.remove("active");
currentIndex = i;
imageNodes[currentIndex].classList.add("active");
});
//forEach로 바꾸기
}
//왼쪽 버튼 클릭하기
slider.prevBtn.addEventListener("click",function(){
imageNodes[currentIndex].classList.remove("active");
currentIndex--;
//0 4 3 2 1 0 4 3 ...
if(currentIndex < 0) currentIndex = images.length - 1;
imageNodes[currentIndex].classList.add("active");
//썸네일
slider.thumnails.querySelector("img.active").classList.remove("active");
thumnailNodes[currentIndex].classList.add("active");
});
//오른쪽 버튼 클릭하기
slider.nextBtn.addEventListener("click",function(){
imageNodes[currentIndex].classList.remove("active");
thumnailNodes[currentIndex].classList.remove("active");
//1 2 3 4 0 1 2 3 4...
currentIndex = (currentIndex + 1) % images.length;
imageNodes[currentIndex].classList.add("active");
thumnailNodes[currentIndex].classList.add("active");
});
}
imageSlider(document.querySelector(".slider__wrap"), images);
</script>
</body>
</html>보충설명
썸네일 이미지 클릭하는 for문 forEach로 바꾸기
thumnailNodes.forEach((e, i) => {
e.addEventListener("click", () => {
slider.thumnails.querySelector("img.active").classList.remove("active");
thumnailNodes[i].classList.add("active")
imageNodes[currentIndex].classList.remove("active");
currentIndex = i;
imageNodes[currentIndex].classList.add("active");
});
});
✨ images 배열에 저장된 이미지들을 HTML img 태그로 변환하여, slider의 images 요소 내부에 추가합니다.
map() 메소드는 images 배열의 모든 요소들을 순회하면서, 각 요소에 대해 인덱스와 함께 지정된 함수를 실행하고 그 결과를 새로운 배열로 만듭니다. "${image}"에서는 HTML img 태그 문자열을 만들어 새로운 배열에 저장합니다.
join() 메소드는 새로운 배열에 저장된 모든 요소들을 하나의 문자열로 합치는 역할을 합니다. 이렇게 하면 HTML img 태그 문자열들이 하나의 문자열로 합쳐지게 되고, slider.images.innerHTML에 대입하여 slider 요소 내부에 HTML img 태그들이 추가됩니다.
✨forEach문을 사용하여 각각의 썸네일 이미지에 대해서 클릭 이벤트를 등록합니다.
썸네일 이미지를 클릭하면 이벤트 핸들러가 실행되어, 현재 활성화되어 있는 이미지와 썸네일 이미지의 active 클래스를 제거합니다. 그리고 클릭한 썸네일 이미지에 active 클래스를 추가합니다.
그 다음, currentIndex 변수의 값을 클릭한 썸네일 이미지의 인덱스로 변경합니다. imageNodes 배열에서 현재 활성화된 이미지에 active 클래스를 제거한 다음, currentIndex에 해당하는 인덱스의 이미지에 active 클래스를 추가합니다. 이렇게 함으로써, 클릭한 썸네일 이미지와 해당 이미지와 일치하는 슬라이드 이미지가 활성화됩니다.