728x90
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>07. 슬라이드 이펙트</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/slider.css">
</head>
<body class="img10 bg07 font09">
<header id="header">
<h1>JavaScript Slider Effect07</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="1346zany@gmail.com">1346zany@gmail.com</a>
</footer>
<!-- //footer-->
</body>
</html>
style
<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%, 140px);
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>
script
이미지 설정
let images = [
"img/sliderEffect01-min.jpg",
"img/sliderEffect02-min.jpg",
"img/sliderEffect03-min.jpg",
"img/sliderEffect04-min.jpg",
"img/sliderEffect05-min.jpg"
];이번엔 main이 아니라 스크립트에 배열을 만들어 이미지를 넣어주었습니다.
선택자
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"),
}이미지 슬라이더를 구현하는 함수 안에 선택자를 넣어줍니다.
parent는 슬라이더가 포함된 부모 요소를 나타내는 매개변수입니다.
images는 슬라이더에 사용되는 이미지들을 포함한 배열입니다.
이미지 출력 및 활성화 하기
//이미지 출력하기
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");images 배열에 담긴 이미지들을 map() 메서드를 사용하여 HTML 코드로 변환한 뒤, join() 메서드를 사용하여 하나의 문자열로 합칩니다.
그리고 innerHTML 프로퍼티를 사용하여 슬라이더에 이미지들을 출력합니다.
이미지들을 출력한 후, 첫 번째 이미지를 활성화합니다.
썸네일 이미지들은 이미지와 같은 HTML 코드로 출력합니다.
그리고 첫 번째 썸네일 이미지를 활성화합니다.
이렇게 이미지와 썸네일 이미지들을 출력하고 활성화하여, 슬라이더의 초기 상태를 구성합니다.
썸네일 이미지 클릭
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");
});
}thumnailNodes는 썸네일 이미지들의 배열입니다.
썸네일을 클릭하면 현재 활성화된 이미지와 썸네일의 활성화 클래스를 삭제하고, 클릭된 썸네일의 인덱스 i를 currentIndex에 할당합니다. 그리고 새롭게 할당된 currentIndex에 해당하는 이미지와 썸네일에 active 클래스를 추가해 활성화합니다.
왼쪽/오른쪽 버튼 클릭
//왼쪽 버튼 클릭하기
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");
//1 2 3 4 0 1 2 3 4 ...
currentIndex = (currentIndex + 1) % images.length;
imageNodes[currentIndex].classList.add("active");
slider.thumnails.querySelector("img.active").classList.remove("active")
thumnailNodes[currentIndex].classList.add("active");
});
}
imageSlider(document.querySelector(".slider__wrap"),images);슬라이더를 구성하는 요소들을 선택합니다.
이미지를 출력하고, 현재 인덱스를 기준으로 활성화된 이미지와 썸네일을 설정합니다.
이전, 다음 버튼을 클릭했을 때 현재 인덱스를 조정하고 활성화된 이미지와 썸네일 변경합니다.