티스토리 뷰
📌 HTML
- 이미지: 이미지 경로 지정
- 버튼 : prev, next 버튼 구현
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover"
/>
<title>carousel</title>
<link rel="stylesheet" href="../../utils/reset.css" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="carousel-wrapper">
<div class="carousel">
<img class="carousel_item" src="assets/1.jpeg" />
<img class="carousel_item" src="assets/2.jpeg" />
<img class="carousel_item" src="assets/3.jpeg" />
<img class="carousel_item" src="assets/4.jpeg" />
<img class="carousel_item" src="assets/5.jpeg" />
<div class="carousel_button--next"></div>
<div class="carousel_button--prev"></div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
📌 CSS
- carousel: active와 active가 아닐시 구분
- 버튼: 클릭(자바스크립트) 에 따른 css 효과 적용
/*
**** carousel-wrapper 시작 ****
*/
/* 1.전체틀*/
.carousel-wrapper {
overflow: hidden;
width: 90%;
margin: auto;
}
/* 2.전체틀 조건*/
.carousel-wrapper * {
box-sizing: border-box;
}
/***************************************/
.carousel {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
/*
**** ccarousel_item 시작 ****
*/
/* 1.기본틀 */
.carousel_item {
opacity: 0;
position: absolute;
top: 0;
width: 100%;
margin: auto;
padding: 1rem 4rem;
z-index: 100;
transition: transform 0.5s, opacity 0.5s, z-index 0.5s;
}
/* 1.active시 기본틀 */
.carousel_item.active {
opacity: 1;
position: relative;
z-index: 900;
}
/* 2. 가상클래스 공통영역 적용: prev, next 버튼시 */
.carousel_item .prev,
.carousel_item .next {
z-index: 800;
}
/* 2. 가상클래스 perv적용 */
.carousel_item.prev {
transform: translateX(-100%);
}
/* 2. 가상클래스 next적용 */
.carousel_item.next {
transform: translateX(100%);
}
/***************************************/
/*
**** carousel_button 시작 ****
*/
/* 1.버튼틀 */
.carousel_button--prev,
.carousel_button--next {
position: absolute;
top: 50%;
width: 3rem;
height: 3rem;
background-color: #fff;
transform: translateY(-50%);
border-radius: 50%;
cursor: pointer;
z-index: 1001;
border: 1px solid black;
}
/* 2.버튼 위치 */
.carousel_button--prev {
left: 0;
}
/* 2.버튼 위치 */
.carousel_button--next {
right: 0;
}
/* 3.버튼 가상요소(::after) 공통부분 */
.carousel_button--prev::after,
.carousel_button--next::after {
content: ' ';
position: absolute;
width: 10px;
height: 10px;
top: 50%;
border-right: 2px solid black;
border-bottom: 2px solid black;
}
/* 4.버튼 가상요소(::after) 모양 */
.carousel_button--prev::after {
left: 54%;
transform: translate(-50%, -50%) rotate(135deg);
}
/* 4.버튼 가상요소(::after) 모양 */
.carousel_button--next::after {
left: 47%;
transform: translate(-50%, -50%) rotate(-45deg);
}
/***************************************/📌 JAVASCRIPT
- CAROUSEL을 클래스화하여 동작 설정
- 버튼에 따른 이벤트 구현
; (function () {
'use strict'
//2.클래스 get
const get = (target) => {
return document.querySelector(target)
}
//3.객체화된 클래스
class Carousel {
constructor(carouselElement) {
this.carouselElement = carouselElement;
this.itemClassName = 'carousel_item';
this.items = this.carouselElement.querySelectorAll('.carousel_item');
this.totalItems = this.items.length;
this.current = 0;
this.isMoving = false;
}
//초기화
initCarousel() {
this.isMoving = false
this.items[this.totalItems - 1].classList.add('prev')
this.items[0].classList.add('active')
this.items[1].classList.add('next')
}
//이벤트 리스너
setEventListeners() {
this.prevButton = this.carouselElement.querySelector(
'.carousel_button--prev'
);
this.nextButton = this.carouselElement.querySelector(
'.carousel_button--next'
);
this.prevButton.addEventListener('click', () => {
this.movePrev();
});
this.nextButton.addEventListener('click', () => {
this.moveNext();
});
}
//prev 이벤트
movePrev() {
if (!this.isMoving) {
if (this.current === 0) {
this.current = this.totalItems - 1;
} else {
this.current--;
}
this.moveCarouselTo();
}
}
//next 이벤트
moveNext() {
if (!this.isMoving) {
if (this.current === this.totalItems - 1) {
this.current = 0
} else {
this.current++
}
this.moveCarouselTo()
}
}
//이벤트 발생시 값 세팅
moveCarouselTo() {
if (!this.isMoving) {
this.disableInteraction();
let prev = this.current - 1;
let next = this.current + 1;
if (this.current === 0) {
prev = this.totalItems - 1
} else if (this.current === this.totalItems - 1) {
next = 0
}
for (let i = 0; i < this.totalItems; i++) {
if (i == this.current) {
this.items[i].className = this.itemClassName + ' active';
} else if (i == prev) {
this.items[i].className = this.itemClassName + ' prev';
} else if (i == next) {
this.items[i].className = this.itemClassName + ' next';
} else {
this.items[i].className = this.itemClassName;
}
}
}
}
disableInteraction() {
this.isMoving = true;
setTimeout(() => {
this.isMoving = false;
}, 500)
}
}
// 1.초기시작
document.addEventListener('DOMContentLoaded', () => {
const carouselElement = get('.carousel'); //초기 시작시 carousel의 item 목록 가져오기
const carousel = new Carousel(carouselElement); //클래스 인스턴스화
carousel.initCarousel(); //초기화
carousel.setEventListeners() //이벤트 발생시 확인
})
})()'자바스크립트' 카테고리의 다른 글
| [자바스크립트] 무한스크롤바 만들기 (0) | 2023.03.02 |
|---|---|
| [자바스크립트] 고차함수 (2) | 2023.02.23 |
| [자바스크립트] 매개변수 설정시 주의사항(Call by Value, Call by Reference) (2) | 2023.02.21 |
| [자바스크립트] 깊은복사(deep copy) 얕은복사(shallow copy) (0) | 2023.02.15 |
| VScode LIVE SERVER(웹서버) 설치 (0) | 2020.03.08 |