<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript for frontend developer</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="slide_wrapper">
<ul class="slides">
<li><img src="/img/pink.png" alt="1"></li>
<li><img src="/img/blue.png" alt="2"></li>
<li><img src="/img/pink.png" alt="3"></li>
<li><img src="/img/blue.png" alt="4"></li>
<li><img src="/img/pink.png" alt="5"></li>
<li><img src="/img/blue.png" alt="6"></li>
<li><img src="/img/pink.png" alt="7"></li>
<li><img src="/img/blue.png" alt="8"></li>
</ul>
</div>
<p class="controls">
<span class="prev">prev</span>
<span class="next">next</span>
</p>
<script src="script.js"></script>
</body>
</html>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.slide_wrapper {
position: relative;
width: 960px; /*300*3*60*/
margin: 0 auto;
height: 300px;
top: 20px;
overflow: hidden;
}
.slides {
position: absolute;
left : 0;
top : 0;
/*width: 2610px;*/ /*일단은 슬라이드 개수만큼 넣음*/
transition: left 0.5s ease-out;
}
.slides li:not(:last-child) { /*막네 빼고 float 넣음*/
float: left;
margin-right: 30px;
}
.controls {
text-align: center;
margin-top: 50px;
}
.controls span {
right: 300px;
background: #333 ;
color: #fff;
padding: 10px 20px;
margin: 20 10px;
cursor: pointer;
}
const slides = document.querySelector(".slides");
const slide = document.querySelectorAll(".slides li");
let currentIdx = 0;
const prevBtn = document.querySelector(".prev");
const nextBtn = document.querySelector(".next");
const slideWidth = 300;
const slideMargin = 30;
//1. 슬라이드의 가변적인 개수 변화를 위해 너비 자동으로 구해줌
slides.style.width = ((slideWidth + slideMargin) * slide.length) - slideMargin + 'px';
function moveSlide(num) {
slides.style.left = `${-num * 330}px`;
currentIdx = num;
}
prevBtn.addEventListener("click", function () {
if (currentIdx !== 0) { //3개씩 보이기 때문에 -1 + -2
moveSlide(currentIdx - 1);
} else {
moveSlide(slide.length - 3);
}
});
nextBtn.addEventListener("click", function () {
if (currentIdx < slide.length - 3) { //3개씩 보이기 때문에 -1 + -2
moveSlide(currentIdx + 1);
} else {
moveSlide(0);
}
});'웹 개발 > 바닐라js' 카테고리의 다른 글
| [따라만들기] menu hover animation (0) | 2022.03.02 |
|---|---|
| [따라만들기] number auto animation (0) | 2022.03.02 |
| [따라만들기] cookie popup (0) | 2022.02.20 |
| [따라만들기] Hover Animation (0) | 2022.02.20 |
| [따라만들기] lightbox (0) | 2022.02.20 |
[따라만들기] multiple slider