Bootstrap에 Carousel 기능이 있지만, 간단한 css + javascript 조합으로 만들 수 있어서 만들어봤다.
Carousel
Carousel은 이미지나 텍스트를 가로로 슬라이드해서 볼 수 있는 기능이다.
<div class="slide-wrapper">
<div class="slide-container" id="slider">
<div class="slide" id="content1">
<div>콘텐츠1</div>
<button type="button" onclick="goToSlide(1)">다음</button>
</div>
<div class="slide" id="content2">
<div>콘텐츠2</div>
<button type="button" onclick="goToSlide(2)">다음</button>
</div>
<div class="slide" id="content3">
<div>콘텐츠3</div>
</div>
</div>
</div>처음 콘텐츠1 화면이 나오고 다음 버튼을 클릭해야 콘텐츠2 화면으로 넘어갈 수 있는 구조를 만들 것이다.
#content1 {
background-color: red;
}
#content2 {
background-color: blue;
}
#content3 {
background-color: green;
}각 콘텐츠의 영역이 잘 작동되는지 알기 위해서 배경색을 위와 같이 지정했다.
.slide-wrapper {
width: 100%;
overflow: hidden; /* 슬라이드 외 내용 숨김 */
}
.slide-container {
display: flex;
transition: transform 0.5s ease;
width: 300%; /* 슬라이드 개수에 따라 조절 (3개면 300%) */
}
.slide {
flex: 0 0 100%; /* 각 슬라이드가 100% 너비 */
box-sizing: border-box;
padding: 1rem;
}위 코드를 해석하면 이렇다.
- .slide-container는 flex container로, 슬라이드들을 가로로 나열한다.
- .slide들은 모두 같은 너비로 설정되어 한 화면에 보이도록 구성된다.
- .slide-wrapper는 슬라이드 전체를 감싸고 overflow를 숨겨 현재 슬라이드만 보이게 한다.
스타일을 적용했으니, 해당 스타일들이 버튼에 따라 동작할 수 있게 javascript를 적용해보자.
function goToSlide(index) {
const slider = document.getElementById('slider');
slider.style.transform = `translateX(-${index * 100}%)`;
}
슬라이드를 넘길때는 .slide-container에 transform: translateX(-100%) 등 값을 조절하여 다음 슬라이드를 좌우로 밀어 보여줄 수 있게 한다.
goToSlide(1)을 호출하면 두 번째 슬라이드로 넘어가고, goToSlide(2)를 호출하면 세 번째 슬라이드로 넘어간다.
전체코드
<!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>
.slide-wrapper {
width: 100%;
overflow: hidden; /* 슬라이드 외 내용 숨김 */
}
.slide-container {
display: flex;
transition: transform 0.5s ease;
width: 300%; /* 슬라이드 개수에 따라 조절 (3개면 300%) */
}
.slide {
flex: 0 0 100%; /* 각 슬라이드가 100% 너비 */
box-sizing: border-box;
padding: 1rem;
}
#content1 {
background-color: red;
}
#content2 {
background-color: blue;
}
#content3 {
background-color: green;
}
</style>
</head>
<body>
<div class="slide-wrapper">
<div class="slide-container" id="slider">
<div class="slide" id="content1">
<div>콘텐츠1</div>
<button type="button" onclick="goToSlide(1)">다음</button>
</div>
<div class="slide" id="content2">
<div>콘텐츠2</div>
<button type="button" onclick="goToSlide(2)">다음</button>
</div>
<div class="slide" id="content3">
<div>콘텐츠3</div>
</div>
</div>
</div>
<script>
function goToSlide(index) {
const slider = document.getElementById('slider');
slider.style.transform = `translateX(-${index * 100}%)`;
}
</script>
</body>
</html>이전 화면 버튼 추가
콘텐츠3 화면에서 다시 콘텐츠1 화면으로 가거나 다음 말고 이전 페이지를 가고 싶으면 goToSlide에 매개변수 값을 조절하면 된다.
<div class="slide-wrapper">
<div class="slide-container" id="slider">
<div class="slide" id="content1">
<div>콘텐츠1</div>
<button type="button" onclick="goToSlide(2)">이전</button>
<button type="button" onclick="goToSlide(1)">다음</button>
</div>
<div class="slide" id="content2">
<div>콘텐츠2</div>
<button type="button" onclick="goToSlide(0)">이전</button>
<button type="button" onclick="goToSlide(2)">다음</button>
</div>
<div class="slide" id="content3">
<div>콘텐츠3</div>
<button type="button" onclick="goToSlide(1)">이전</button>
<button type="button" onclick="goToSlide(0)">다음</button>
</div>
</div>
</div>
기록해서 내 것으로 만들기