- Frederick Philips Brooks
Mythical Man-Month 저자
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">
<meta name="view-transition" content="same-origin">
<title>07. 슬라이드 이펙트</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/slider.css">
<!-- GSAP -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
</head>
<body class="img05 bg05 font10">
<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="mailto:ture403@gmail.com">ture403@gmail.com</a>
</footer>
</body>
css 코드입니다.
/* silder_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;
background-color: rgba(0,0,0,0.2);
transition: all 300ms ease-in-out;
color: #fff;
}
.slider_btn a:hover {
background-color: rgba(0,0,0,0.5);
}
.slider_btn a.next {
right: 0;
}
JS코드입니다.
let images = [
"./img/silderEffect01-1-min.jpg",
"./img/sliderEffect07-1-min.jpg",
"./img/sliderEffect08-1-min.jpg",
"./img/sliderEffect09-min.jpg",
"./img/sliderEffect10-1-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
// 이미지 활성화(active) 하기
let imageNodes = slider.images.querySelectorAll("img");
imageNodes[currentIndex].classList.add("active");
// 썸네일 사진 출력
const a =slider.images;
a.childNodes[0].classList.add("active");
// 썸네일 활성화(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");
// })
// }
thumnailNodes.forEach((el,index) => {
el.addEventListener("click",()=>{
slider.thumnails.querySelector("img.active").classList.remove("active");
el.classList.add("active");
imageNodes[currentIndex].classList.remove("active");
currentIndex = index;
imageNodes[currentIndex].classList.add("active");
})
});
// 왼쪽 버튼 클릭했을때
slider.prevBtn.addEventListener("click",()=>{
imageNodes[currentIndex].classList.remove("active");
currentIndex--;
//0 4 3 2 1 0 4 3 2 1 ....
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",()=>{
imageNodes[currentIndex].classList.remove("active");
currentIndex++;
//1 2 3 4 0 1 2 3 4 0
currentIndex = (currentIndex) % 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);
자바스크립트
- 오늘은 자바스크립트 썸네일을 추가해서 만들었습니다.
- 먼저 slider_thumb div를 만들엇습니다. 그안에 img태그를 넣어서 만들었습니다.
- 처음 slider변수안에 img경로를 넣었습니다.
- 그리고 function imageSlider를 만들었습니다. 그안에 매개변수 첫번째에 parent , 2번쨰 images 를 넣었습니다.
- 함수 출력할때 처음 매개변수는 document.querySelector(".slider_wrap")를 넣어서 부모요소를 적용했고 2번째 매개변수는 변수에 있는 images 를 넣었습니다.
- 그리고 그안에 변수 slider 안에 선언자를 입력합니다.
- 그리고 처음에 slider 안에 images 안에 innerHTML을 써서 맵 매서드를 써서 반복을 돌려서 생성을 했습니다.
- 그리고 ,가 나오므로 체인으로 join을 써서 ,를 지웠습니다.
- 그다음 이미지 안에 있는 썸네일 화면을 클릭하면 움직이게 만들었습니다.
- 먼저 썸네일을 반복을 돌린후 click했을떄 이벤트를 주었습니다. 먼저 img.active 가 붙을걸 찾아서 active를 지웠습니다.
- 그다음 클릭한것을 active를 주었습니다. 그다음 img의 전체를 가져와서오는 변수 thumnailNodes 에 넣었습니다.
- thumnailNodes[currentIndex]값을 넣어주었습니다. 그안에 classList.remove("active")를 해줍니다.
- 그리고 currentIndex 값을 index 값을 넣어주면 add("active")를 추가해줍니다.
- 그다음 왼쪽버튼을 클릭했을때에 이벤트 발생문 입니다.
- 그리고 currentIndex값을 --를 주면 1씩 빠집니다. 그리고 if문을 써서 0보다 작을때 currntIndex값을 사진의갯수뺴기1을 해주었습니다. 그리고 이미지에 active를 붙여서 닷도 활성화를 해주었습니다.
- 반대로 오른쪽 버튼을 클릭했을때 currentIndex 값을 증가 시켜서 currentIndex 값에 사진갯수를 나눈 나머지값이 currentIndex값으로 들어갑니다. 그럼 1 2 3 4 0 이 반복이 됩니다.
- 그다음 imageNodes에 해당하는 순번에 active를 붙여서 활성화 합니다.
- 썸네일도 전에있던 걸 지우고 다시 활성화 시키는 코드를 작성합니다.