Carousel Slide
: 여러 이미지를 슬라이드 형태로 볼 수 있게 만든 컨텐츠
사용 언어
- HTML
- Javascript
- CSS
구조
- index.html: 전체 구조
- index.js: 버튼, 슬라이드 기능
- main.css: 디자인
코드
구현 계획 및 기능 구현
- 이미지 준비하기
- 브라우저 크기, 위치 배치
.slide-container {
width: 300vw;
transition: all 1s;
}
.slide-box {
width: 100vw;
float: left; /* 왼쪽으로 배치 */
}
.slide-box img {
width: 100%;
}- 숫자 버튼
- 숫자 버튼을 누르면 해당 번호의 사진이 슬라이드 된다.
- 숫자 버튼에서도 현재 사진 변수(now)를 신경 써야 한다!
// 2번째 사진 불러오기
document.getElementsByClassName('slide-2')[0].addEventListener('click', function() {
document.querySelector('.slide-container').style.transform = 'translateX(-100vw)'
now = 2;
// ***숫자 버튼에서도 현재 사진 변수(now)를 신경 써야 한다!
});- 다음, 이전 버튼
- 다음 버튼 - 현재 사진이 1번이면 -> 2번 보여주기
- 이전 버튼 - 현재 사진이 3번이면 -> 2번 보여주기
var now = 1; // 현재 사진 변수
document.querySelector('.next').addEventListener('click', function() {
if (now == 3) { // 마지막 장에서 '다음'을 누르면 첫 번째 장이 나오도록
document.querySelector('.slide-container').style.transform = 'translateX(0vw)'
now = 1;
} else {
document.querySelector(".slide-container").style.transform = "translateX(-" + now + "00vw)";
now++;
}
});- transition 추가
.slide-container {
width: 300vw;
transition: all 1s;
}index.html
<!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>
@import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo&display=swap');
</style>
<link rel="stylesheet" href="main.css" />
</head>
<body>
<div id="title">
<p>想见你</p>
</div>
<div style="overflow: hidden;">
<div class="slide-container">
<div class="slide-box">
<img src="xiang1.png">
</div>
<div class="slide-box">
<img src="xiang2.png">
</div>
<div class="slide-box">
<img src="xiang3.png">
</div>
</div>
</div>
<div class="btn-slide">
<button class="slide-1">1</button>
<button class="slide-2">2</button>
<button class="slide-3">3</button>
</div>
<div class="btn-next">
<button class="next">다음</button>
<button class="before">이전</button>
</div>
<script src="index.js"></script>
</body>
</html>index.js
// 숫자 버튼
/* 2번 버튼 클릭 시 - 2번 사진 가져오기(1번 사진을 왼쪽으로 밀기) */
document.getElementsByClassName('slide-2')[0].addEventListener('click', function() {
document.querySelector('.slide-container').style.transform = 'translateX(-100vw)'
now = 2;
// ***숫자 버튼에서도 현재 사진 변수(now)를 신경 써야 한다!
});
// 3번 버튼
document.getElementsByClassName('slide-3')[0].addEventListener('click', function() {
document.querySelector('.slide-container').style.transform = 'translateX(-200vw)'
now = 3;
});
// 1번 버튼
document.getElementsByClassName('slide-1')[0].addEventListener('click', function() {
document.querySelector('.slide-container').style.transform = 'translateX(0vw)'
now = 1;
});
// 다음 버튼
var now = 1; // 현재 사진 변수
document.querySelector('.next').addEventListener('click', function() {
if (now == 3) { // 마지막 장에서 '다음'을 누르면 첫 번째 장이 나오도록
document.querySelector('.slide-container').style.transform = 'translateX(0vw)'
now = 1;
} else {
document.querySelector(".slide-container").style.transform = "translateX(-" + now + "00vw)";
now++;
}
});
// 이전 버튼
document.querySelector('.before').addEventListener('click', function() {
if (now == 1) { // 첫 번째 장에서 '이전'을 누르면 마지막 장이 나오도록
document.querySelector('.slide-container').style.transform = 'translateX(-200vw)'
now = 3;
} else {
document.querySelector(".slide-container").style.transform = "translateX(-" + (now - 2) + "00vw)";
now--;
}
});main.css
.slide-container {
width: 300vw;
transition: all 1s;
}
.slide-box {
width: 100vw;
float: left;
}
.slide-box img {
width: 100%;
}
/* 제목 */
#title {
font-family: "Nanum Myeongjo", serif;
font-weight: 500;
font-size: 40px;
text-align: center;
padding: 10px;
}
/* 숫자 버튼 */
.btn-slide {
text-align: center;
padding: 40px;
}
.slide-1 {
font-family: "Nanum Myeongjo", serif;
text-align: center;
font-size: 15px;
margin: 0px 5px 0px 10px;
width: 27px;
height: 25px;
border: none;
background-color: rgb(228, 234, 239);
box-shadow: 1px 2px 1px rgb(172, 172, 172), 1px 1px 0px rgb(237, 237, 237);
}
.slide-1:hover {
background-color: aliceblue;
}
.slide-2 {
font-family: "Nanum Myeongjo", serif;
text-align: center;
font-size: 15px;
margin: 0px 5px 0px 10px;
width: 27px;
height: 25px;
border: none;
background-color: rgb(228, 234, 239);
box-shadow: 1px 2px 1px rgb(172, 172, 172), 1px 1px 0px rgb(237, 237, 237);
}
.slide-2:hover {
background-color: aliceblue;
}
.slide-3 {
font-family: "Nanum Myeongjo", serif;
text-align: center;
font-size: 15px;
margin: 0px 5px 0px 10px;
width: 27px;
height: 25px;
border: none;
background-color: rgb(228, 234, 239);
box-shadow: 1px 2px 1px rgb(172, 172, 172), 1px 1px 0px rgb(237, 237, 237);
}
.slide-3:hover {
background-color: aliceblue;
}
/* 다음, 이전 버튼 */
.btn-next {
font-family: "Nanum Myeongjo", serif;
text-align: center;
}
.next {
font-family: "Nanum Myeongjo", serif;
text-align: center;
font-size: 15px;
margin: 0px 5px 0px 10px;
width: 50px;
height: 27px;
border: none;
background-color: rgb(223, 238, 251);
box-shadow: 1px 2px 1px rgb(172, 172, 172), 1px 1px 0px rgb(237, 237, 237);
}
.next:hover {
background-color: aliceblue;
}
.before {
font-family: "Nanum Myeongjo", serif;
text-align: center;
font-size: 15px;
margin: 0px 10px 0px 5px;
width: 50px;
height: 27px;
border: none;
background-color: rgb(252, 235, 235);
box-shadow: 1px 2px 1px rgb(172, 172, 172), 1px 1px 0px rgb(237, 237, 237);
}
.before:hover {
background-color: aliceblue;
}배운 것
해결한 점
문제
- 다음, 이전 버튼만 누르면 잘 실행되는데
숫자 버튼을 누르고서 다음, 이전 버튼을 누르면 이상하게 실행이 되었다.
특히 2번 버튼을 누르고 이전 버튼을 누르면 3번째 사진이 나오는 오류가 생겼다.
- 1번째 사진에서 이전 버튼을 누르면 3번째(마지막 장) 사진이 나오고,
3번째 사진(마지막 장)에서 다음 버튼을 누르면 1번째 사진이 나왔으면 좋겠는데
3번 버튼을 누르고 다음 버튼을 누르면 2번째 사진이 나오는 오류가 발생했었다.
(이 상태에서 다음 버튼을 2번 누르면 정상적으로 1번째 사진이 나오고요)
해결
- 숫자 버튼에서 현재 사진 변수인 now를 신경쓰지 않아서 일어난 일이었다.
다음, 이전 버튼이 없었다면 상관없겠지만 (now 변수가 아예 없었을테니)
사진을 다음으로 넘기고 이전으로 되돌리는 기능을 추가했기 때문에
숫자 버튼 영역에서도 now 변수를 신경 썼어야 했다.
결국 숫자 버튼에서 now 변수의 값을 클릭한 숫자 버튼의 값을 할당했더니
해결되었다!
깃허브
https://github.com/kwonboryong/toyProjects/tree/main/carousel-slide
참고
코딩애플
비전공자 개발 일기