반응형
🚀 버튼 슬라이더
- Vanilla JS + HTML + CSS
> 완성본 보러가기
약속 시간이 제법 남아서 카페에서 오랜만에 코딩을 했다. 그동안 배운 바닐라 JS를 이용하여 슬라이더를 만들어 보기로 했다.
근데 이렇게 하는게 맞나...?
(생각해보니 이런식이면 배열로 하는게 더 편했을듯...)
🎮 Screenshot
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link href="style.css" rel="stylesheet" type="text/css" />
<title>Practice</title>
<body>
<div class="grand">
<div class="slider">
<div class="slider__01 showing"><img src="images/1.jpg"></div>
<div class="slider__02"><img src="images/2.jpg"></div>
<div class="slider__03"><img src="images/3.jpg"></div>
<div class="slider__04"><img src="images/4.jpg"></div>
<div class="slider__05"><img src="images/5.jpg"></div>
<div class="slider__bg"></div>
</div>
<div class="btn__div">
<span><button class="pre">👈</button></span>
<span><button class="next">👉</button></span>
</div>
</div>
<script src="slider.js"></script>
</body>
</head>
style.css
/*slider item*/
img {
width: 400px; height:200px;
}
.slider{width: 400px; height:200px; position: relative; margin-bottom: 10px;}
.slider__01{ position: absolute; }
.slider__02{ position: absolute; }
.slider__03{ position: absolute; }
.slider__04{ position: absolute; }
.slider__05{ position: absolute; }
.slider__bg{ position: absolute; width: 400px; height:200px; background-color: black; z-index: 0; }
/*btn*/
.btn__div{text-align:center; width: 400px;}
/*function*/
.showing{ z-index: 1; animation: fadeIn 0.5s linear; }
/*animation*/
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
slider.js
//Current DIV
let current = 1;
//Call by btn class
const btnPre = document.querySelector(".pre"),
btnNext = document.querySelector(".next");
//button Next
function handleNextEvent(){
let target = document.querySelector(`.slider__0${current}`);
target.classList.remove("showing");
current = current + 1 < 6 ? current + 1 : 1;
target = document.querySelector(`.slider__0${current}`);
target.classList.add("showing");
}
btnNext.addEventListener("click", handleNextEvent);
//button Pre
function handlePreEvent(){
let target = document.querySelector(`.slider__0${current}`);
target.classList.remove("showing");
current = current - 1 > 0 ? current - 1 : 5;
target = document.querySelector(`.slider__0${current}`);
target.classList.add("showing");
}
btnPre.addEventListener("click", handlePreEvent);반응형
'Frontend > Vanilla JS' 카테고리의 다른 글
| 호이스팅(Hoisting)이란 무엇일까? (0) | 2020.08.29 |
|---|---|
| 바닐라 자바스크립트 계산기 만들기 (0) | 2020.08.13 |
| 바닐라 자바스크립트 슬라이더 만들기(2) (2) | 2020.08.08 |