Javascript
only javascript로 이미지 슬라이더 만들기
breeghty
2023. 2. 23. 12:29
로직
- 이미지는 총 세개를 사용한다.
- 이미지를 가로로 배열하고 각각 100vw 를 차지하게 한다. (총 300vw)
- overflow: hidden을 해 주어 화면 밖으로 넘치는 이미지는 가린다.
- 버튼을 누를 때마다 transform: translateX(-100vw)이런식으로 이미지 크기만큼 이동시킨다.
- 이전버튼과 다음버튼의 경우 현재상태를 기억해야 하므로, num이라는 변수를 생성해 해당 이미지에 부여된 번호를 할당한다.
num==1일 경우, 다음버튼을 누르면 2번 슬라이드 버튼을 누른것과 같은 동작이 실행되어야 함.
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
.slide-container{
width: 300vw;
/* transform: translateX(-100vw); */
transition:all 1s;
}
.slide-box{
width: 100vw;
float:left;
}
.slide-box img{
width: 100%;
height: 100vh;
}
</style>
</head>
<body>
<div style="overflow: hidden;">
<div class="slide-container" id="slideBox">
<div class="slide-box">
<img src="1.jpg" alt="">
</div>
<div class="slide-box">
<img src="2.jpg" alt="">
</div>
<div class="slide-box">
<img src="3.jpg" alt="">
</div>
</div>
</div>
<button class="prev">Prev</button>
<button class="slide-1">1</button>
<button class="slide-2">2</button>
<button class="slide-3">3</button>
<button class="next">Next</button>
<script>
let num= 1;
let slideBox = document.getElementById('slideBox');
document.querySelector('.slide-1').addEventListener('click',function(){
slideBox.style.transform = 'translateX(0vw)';
num=1;
console.log(num);
});
// 2번 슬라이드로
document.querySelector('.slide-2').addEventListener('click',function(){
slideBox.style.transform = 'translateX(-100vw)';
num=2;
console.log(num);
});
// 3번 슬라이드로
document.querySelector('.slide-3').addEventListener('click',function(){
slideBox.style.transform = 'translateX(-200vw)';
num=3;
console.log(num);
});
// 다음버튼
document.querySelector('.next').addEventListener('click',function(){
if(num==1){
slideBox.style.transform = 'translateX(-100vw)';
num=2;
}else if(num==2){
slideBox.style.transform = 'translateX(-200vw)';
num=3;
}else if(num ==3){
slideBox.style.transform = 'translateX(0vw)';
num=1;
}
});
//이전버튼
document.querySelector('.prev').addEventListener('click',function(){
if(num==1){
slideBox.style.transform = 'translateX(-200vw)';
num=3;
}else if(num==2){
slideBox.style.transform = 'translateX(0vw)';
num=1;
}else if(num ==3){
slideBox.style.transform = 'translateX(-100vw)';
num=2;
}
});
</script>
</body>
</html>