[미니프로젝트] Carousel

Changyun Go·2021년 9월 20일

JavaScript 미니프로젝트

GitHub

요구사항

화면 구성
- 페이지 로딩 시, 첫 번째 이미지 화면에 보이기
- 좌측, 우측 화살표 두개 보이기
- 화면 아래 쪽에 Dot 다섯개 보이기
기능 구현
- 좌측 화살표 클릭시 이전 이미지 보여주기
- 우측 화살표 클릭시 다음 이미지 보여주기
- 5번째 이미지에서 우측 화살표를 누를 경우, 1번째 이미지 보여주기
- 1번째 이미지에서 좌측 화살표를 누를 경우, 5번째 이미지 보여주기
- 이미지 하단의 Dot를 누를 경우, 해당 순번의 이미지 보여주기

실행 화면

링크 : https://changyun-go.github.io/Mini-Project/2.%20Carousel/

Code

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		
		<link rel="stylesheet" type="text/css" href="style.css">
		<script src="script.js" type="text/javascript" defer></script>
		
		<title>Carousel</title>
	</head>
	<body>
		<div class = "wrapper">
			<button id = "left-btn"></button>
			<img id = "main-img" src="images/image-1.jpg">
			<button id = "right-btn"></button>
		</div>
		
		<div class = "dot">
			<button class = num_btn id = "btn1"></button>
			<button class = num_btn id = "btn2"></button>
			<button class = num_btn id = "btn3"></button>
			<button class = num_btn id = "btn4"></button>
			<button class = num_btn id = "btn5"></button>
		</div>
		</body>
</html>

CSS

body {
	margin: 0;
	background-color: pink;
}
#main-img {
	display: block;
	margin: 200px auto 30px;
	text-align: center;
}
.wrapper {
	display: grid;
	grid-template-columns: auto 700px auto;
}
#left-btn {
	background: url(arrow_icon.png) no-repeat;
  	cursor: pointer;
  	border: none;
  	width: 100px;
  	height: 97px;
	border-radius: 50%;
	position: relative;
	top: 350px;
	right: -341px;
}
#right-btn {
	background: url(arrow_icon.png), no-repeat;
  	cursor: pointer;
  	border: none;
  	width: 100px;
  	height: 97px;
	border-radius: 50%;
	transform: rotate(180deg);
	position: relative;
	top: 350px;
	left: 51px;	
}
.dot {
	text-align: center;
}
.num_btn {
	width: 15px;
	height: 15px;
	margin: 0px 10px 0px 10px;
	cursor: pointer;
	border: none;
	border-radius: 50%;
	background-color: lightcoral;
}
.num_btn:hover  {
 	cursor: pointer;
 	background: rgba(255, 232, 232);
}

JavaScript

const imgs = ["images/image-1.jpg", "images/image-2.jpg", "images/image-3.jpg", "images/image-4.jpg", "images/image-5.jpg"];
    
const main_img = document.querySelector("#main-img")
const left_btn = document.querySelector("#left-btn");
const right_btn = document.querySelector("#right-btn");
const btn1 = document.querySelector("#btn1");
const btn2 = document.querySelector("#btn2");
const btn3 = document.querySelector("#btn3");
const btn4 = document.querySelector("#btn4");
const btn5 = document.querySelector("#btn5");

let i = 0;

left_btn.addEventListener("click", function leftClick(){
	if(i === 0){
		i = 4;
	}
	else{
		i--;
	}
	main_img.src = imgs[i];
});

right_btn.addEventListener("click", function rightClick(){
	if(i === 4){
		i = 0;
	}
	else{
		i++;
	}
	main_img.src = imgs[i];
});

btn1.addEventListener("click", function img1(){
	main_img.src = imgs[0];
});
btn2.addEventListener("click", function img2(){
	main_img.src = imgs[1];
});
btn3.addEventListener("click", function img2(){
	main_img.src = imgs[2];
});
btn4.addEventListener("click", function img2(){
	main_img.src = imgs[3];
});
btn5.addEventListener("click", function img2(){
	main_img.src = imgs[4];
});