css
body {
margin: 0;
}
.slider {
width: 100%;
position: relative;
}
.slider__item {
width: 100%;
height: 500px;
display: flex;
justify-content: center;
align-items: center;
color: white;
position: absolute;
top:0;
z-index: 0;
opacity: 0;
transition: all .5s ease-in-out;
transform: scale(0.9);
}
.slider__item:nth-child(odd) {
background-color: #8e44ad;
}
.slider__item:nth-child(even) {
background-color: #3498db;
}
.showing {
z-index: 1;
opacity: 1;
transform: none;
}
html & JS
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript for FrontEnd developer</title>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Cormorant+Infant:700,700italic|Lato:400,400italic,700">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="slider">
<div class="slider__item">
<h1>1</h1>
</div>
<div class="slider__item">
<h1>2</h1>
</div>
<div class="slider__item">
<h1>3</h1>
</div>
<div class="slider__item">
<h1>4</h1>
</div>
<div class="slider__item">
<h1>5</h1>
</div>
</div>
<script>
const SHOWING_CLASS = "showing";
const firstSlide = document.querySelector(".slider__item:first-child"); //첫번째 요소 선택
function slide() {
const currentSlide = document.querySelector(`.${SHOWING_CLASS}`); //showing 클래스가 들어가있는게 현재 element
if (currentSlide) { //두번째 부터는 showing 클래스가 들어가있는게 있음
currentSlide.classList.remove(SHOWING_CLASS); //현재꺼는 showing 클래스 지우고
const nextSlide = currentSlide.nextElementSibling; //다음 형제 element에 SHOWING_CLASS 지정
if (nextSlide) { //다음 요소에 SHOWING_CLASS 적용
nextSlide.classList.add(SHOWING_CLASS)
} else { //마지막이라서 nextElementSibling가 없는 경우
firstSlide.classList.add(SHOWING_CLASS); //처음으로 돌아감
}
} else { //처음이라서 SHOWING_CLASS 적용된게 하나도 없을 떄
firstSlide.classList.add(SHOWING_CLASS); //그래서 첫번째 자식에게 SHOWING_CLASS 적용
}
}
slide();
setInterval(slide, 1000);
</script>
</body>
</html>
'웹 개발 > 바닐라js' 카테고리의 다른 글
| [따라만들기] back to top 버튼 (0) | 2022.02.20 |
|---|---|
| [따라만들기] modal popup (0) | 2022.02.20 |
| [드림코딩] 클릭 후 좌표 가져오기 (0) | 2021.09.21 |
| [드림코딩] 윈도우 사이즈 가져오기 (0) | 2021.09.21 |
| [노마드코더] 바닐라JS 챌린지 - 랜덤 그라데이션 백그라운드 (0) | 2021.09.02 |
[따라만들기] carouse slider