전체소스 보러가기
<!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">
<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>
</head>
<body class="img05 bg03 font07">
<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> <!--접근성을 위해 사이트를 만들때는 title을넣어준다.-->
<a href="#" class="next" title="다음이미지">next</a>
</div>
</div>
</div>
</main>
<!-- main -->
<footer id="footer">
<a href="mailto:ghkddn132@naver.com">ghkddn132@naver.com</a>
</footer>
<!-- footer -->slider__img와 slider__thumb에 이미지는 자바스크립트를 통해 넣어 주기 때문에 비워주시고,슬라이드 이펙트 6에서 사용했던 slider__btn을 사용하였습니다. 그후 각 영역의 간격을 정해줍니다.
<script>
let images = [
"img/sliderEffect01-min.jpg",
"img/sliderEffect02-min.jpg",
"img/sliderEffect03-min.jpg",
"img/sliderEffect04-min.jpg",
"img/sliderEffect05-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('');
// 썸네일 이미지 출력하기
slider.thumnails.innerHTML = slider.images.innerHTML
}
imageSlider(document.querySelector(".slider__wrap"), images);자바스크립트에서 이미지를 출력하고 싶을 때는 변수에 이미지를 저장하고 그값을 함수로 실행하여 이미지의 배열값을 넣고 싶은 .slider__wrap를 가져오고 , 이미지가 있는 배열의 값을 넣어준후 변수 slider에 slider__wrap에 있는 값을 객체값으로 하여 선택자를 만들어 주고 있습니다.
그후 이미지를 출력하기 위해 slider에서 가져온 선택자 images에 이미지가 들어있는 배열에 images를 map으로 하여 이미지의 값과 배열의 수를 가져와 return 으로 출력 해주고 있습니다. 그후 .join('')으로 배열에 있는 ,를 없애 주었습니다.
그러면 slider__img에 이미지가 들어가 있는것을 볼수 있습니다.
그후 slider__thumb에도 같은 이미지를 만들어 주기위 slider.thumnails.innerHTML = slider.images.innerHTML로 slider__img에 출력한 값을 썸네일에도 출력하였습니다.
그다음
각이미지와 썸네일을 활성화를 하기위해
// 이미지 활성화(active) 하기
let imageNodes = slider.images.querySelectorAll("img");
imageNodes[currentIndex].classList.add("active");
// 썸네일 활성화(active) 하기
let thumnailNodes = slider.thumnails.querySelectorAll("img");
thumnailNodes[currentIndex].classList.add("active");변수로 이미지와 썸네일 전체를 가져오고
함수에서 맨처음 만들었던 변수 currentIndex = 0;를 이용해 currentIndex의 순서에 위치한 이미지와 썸네일을 class에 active를 추가 해줌으로써 active가 추가 됐을때 그에 해당하는 css가 적용 하도록 하였습니다.
// 왼쪽 버튼 클릭하기
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");
currentIndex++;
//1 2 3 4 0 1 2 3 4...
currentIndex = (currentIndex) % images.length;
imageNodes[currentIndex].classList.add("active");
// 썸네일
slider.thumnails.querySelector("img.active").classList.remove("active");
thumnailNodes[currentIndex].classList.add("active");
});그후 왼쪽클릭이나 오른쪽 클릭을 하면 이미지의 active를 없애주고 currentIndex 의 값에 --나 ++를 주고 그값을로
왼쪽클릭의 경우엔 currentIndex가 0보다 작아질 경우 currentIndex 의 값은 images.length - 1; 한값이 나오므로
currentIndex 이 0으로 시작 할 경우 currentIndex --를해주면 currentIndex 는-1이 되고 0보다 작으므로 조건이 성립되어
images.length - 1값인 4가 나오게 되고 배열값이 4인 이미지의 클라스에 ative해주어 보여주게 해줍니다.되고 썸네일도 같이 active를 변경되게 해주었습니다.
만약 거기서 한번더 왼쪽클릭을 했을경우 currentIndex 의 값은 4인채로 시작하며 --를 하였을때 3이 되므로 0보다 작다는 조건이 성립이 되지않아 3그대로 실행을 하여 배열값이 3인 이미지가 나오게 됩니다.
오른쪽클릭의 경우엔 currentIndex++가 되고 currentIndex 의 값이 (currentIndex) % images.length; 가 됩니다.
만약 currentIndex 값이 4부터 시작한다면 ++를하여 5가 되고 그값으로 images.length; 의 나머지 값을 구하게 되면 현재 이미지의 갯수는 5개이기 때문에 5%5는 0이 되므로 currentIndex 의 값은 0이 되고 그값의 배열에 있는 이미지와 썸네일에 ative가 활성화 되면서 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");
});
// thumnailNodes[i].addEventListener("click",() => { //화살표함수는 this를 가져올수없다.
// alert(this.src)
// });
}썸네일로 이미지를 클릭하여 해당 이미지를 가져올수 있는데 미리 저장해 두었던 thumnailNodes의 변수를 가져와
for문으로 i=0일때 i<thumnailNodes.length만큼 i++를 주고 그i의 값이 있는 썸네일이미지를 클릭 했을때 함수를 함수를 실행하여 slider.thumnails에 class가 img.active로 되어있는 값을 가져와 class active를 없애주고 사용자가 누른 썸네일 i값에위치한 배열의 이미지에 ative를 넣어 줍니다. 그 다음 imageNodes[currentIndex]에 적용되어있던 ative를 없애고, currentIndex를 i값으로 바꾸어 그값에 있는 배열이미지에 ative가 활성화 되게 해줍니다.
forEach으로 활용 해보기
//forEach문
thumnailNodes.forEach((el, i) => {
el.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");
});
});방금은 fot 문을 사용하였다면 이번에는 forEach문을 사용하여 원하는 썸네일이미지를 클릭 했을때 해당이미지로 넘어가게 할수 있습니다.
thumnailNodes의 el(값)과i(배열값)을 가져와
그값에 해당하는 이미지를 클릭 했을때 위for문과 같이 클릭한 값의 배열값(i)를 가져와 적용해 주고 그i에 해당하는 값을 활성화 시켜줍니다.