Programming Language/🟨 Javascript
바닐라 JS로 Carousel Slider 만들기
DarrenKwonDev
2020. 4. 18. 03:53
Carousel(캐러셀)의 본 의미는 회전목마, 수화물 컨베이어 벨트를 말한다. 무슨 슬라이더를 의미하는지 감이 올 것이다.
캐러셀 슬라이더를 구현하는 jQuery가 존재하지만 (Slick을 추천) 아주 가벼운 웹을 만들거나 간단한 웹을 만든다면 바닐라 JS로 구현해보는 것도 나쁘지 않을 것이다.
🧷 기본 HTML/CSS/JS
기본 아이디어는, 해당 리스트 중에서 보이고 싶은 리스트에 showing 클래스를 줘서 z-index로 튀어나오게 만드는 것이다. 일정 시간이 지나거나 버튼을 누르면 기존 showing 클래스를 지우고 다른 곳에 showing 클래스를 생성하는 방식으로 이동한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
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 1s ease-in-out;
transform: scale(0.9);
}
.slider__item:nth-child(odd) {
background-color: violet;
}
.slider__item:nth-child(even) {
background-color: yellowgreen;
}
.showing {
z-index: 1;
opacity: 1;
transform: scale(1);
}
</style>
</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");
const Slide = () => {
const currentSlide = document.querySelector(`.${SHOWING_CLASS}`);
if (currentSlide) {
currentSlide.classList.remove(SHOWING_CLASS);
const nextSlide = currentSlide.nextElementSibling;
if (nextSlide) {
nextSlide.classList.add(SHOWING_CLASS);
} else {
firstSlide.classList.add(SHOWING_CLASS);
}
} else {
firstSlide.classList.add(SHOWING_CLASS);
}
};
setInterval(Slide, 2500);
</script>
</body>
</html>
🧷 React + Slick
다음 게시물에 slick pakage를 이용하여 슬라이더를 구현하는 방법을 정리해두었다.
Slick
slick-carousel the last carousel you'll ever need www.npmjs.com slick - the last carousel you'll ever need slick is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 trans..
darrengwon.tistory.com