[CSS] 쉽고 빠르게 제작하는 캐러셀(Carousel) 슬라이드 만들기

이번시간에는 CSS와 JavaScript로 제작된 캐러셀(Carousel) 슬라이드를 소개하겠습니다.

해당 캐러셀(Carousel)은 코드만 입력해서 라이브러리 없이 제작했습니다.

또한 HTML이 간단한 구조를 가지고 있어 쉽게 빠르게 만들 수 있습니다.

1. 캐러셀(Carousel) 슬라이드 만들기 - HTML

2. 캐러셀(Carousel) 슬라이드 만들기 - CSS

3. 캐러셀(Carousel) 슬라이드 만들기 - JavaScript

4. 캐러셀(Carousel) 슬라이드 만들기 - 결과화면

1. 캐러셀(Carousel) 슬라이드 만들기 - HTML

첫 번째로 HTML 코드를 소개하겠습니다.

총 3개의 영역으로 구조가 잡혀있습니다.

이미지 삽입은 캐러셀에 들어갈 이미지를 나타냅니다.

사이트 버튼과 중앙 버튼은 이미지 슬라이드를 넘기기 위한 버튼입니다.

부트스트랩에 아이콘을 사용해서 svg 태그를 나타냈습니다.

기타 궁금한 사항은 아래 링크를 참고바랍니다.

주소 : 부트스트랩 아이콘 링크

HTML 코드

<div class="carousel_main">
    <!-- 캐러셀 이미지 삽입 -->
    <div class="carousel_wrapper">
        <div class="carousel_slide">
            <img src="#" alt="#" />
        </div>
        <div class="carousel_slide">
            <img src="#" alt="#" />
        </div>
        <div class="carousel_slide">
            <img src="#" alt="#" />
        </div>
        <div class="carousel_slide">
            <img src="#" alt="#" />
        </div>
    </div>

    <!-- 캐러셀 사이드 버튼 -->
    <div class="carousel_button_container">
        <button type="button" class="carousel_prev">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-chevron-double-left" viewBox="0 0 16 16">
                <path fill-rule="evenodd" d="M8.354 1.646a.5.5 0 0 1 0 .708L2.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>
                <path fill-rule="evenodd" d="M12.354 1.646a.5.5 0 0 1 0 .708L6.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>
            </svg>
        </button>
        <button type="button" class="carousel_next">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-chevron-double-right" viewBox="0 0 16 16">
                <path fill-rule="evenodd" d="M3.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L9.293 8 3.646 2.354a.5.5 0 0 1 0-.708z"/>
                <path fill-rule="evenodd" d="M7.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L13.293 8 7.646 2.354a.5.5 0 0 1 0-.708z"/>
            </svg>
        </button>
    </div>

    <!-- 캐러셀 중앙 버튼 -->
    <div class="carousel_pagination">
        <div class="carousel_circle"></div>
        <div class="carousel_circle"></div>
        <div class="carousel_circle"></div>
        <div class="carousel_circle"></div>
    </div>
</div>

carousel_main : 최상위 클래스로 캐러셀의 전체 구조를 잡아줍니다.

carousel_wrapper : 캐러셀 슬라이드의 전체 구조를 잡아줍니다.

carousel_slide : 캐러셀 이미지를 설정합니다.

carousel_button_container : 슬라이드를 넘기기 위한 사이드 버튼의 전체 구조를 잡아줍니다.

carousel_prev / carousel_next : 캐러셀 사이드 버튼을 설정하고 svg 태그를 사용했습니다.

carousel_pagination : 캐러셀 중앙 버튼의 전체 구조를 잡아줍니다.

carousel_circle : 캐러셀 중앙 버튼을 설정합니다.

2. 캐러셀(Carousel) 슬라이드 만들기 - CSS

다음으로 CSS 코드를 소개하겠습니다.

HTML에서 3개의 구조로 나눴기때문에 CSS도 3개로 분리했습니다.

1. CSS 코드 - 이미지

/* 캐러셀 전체 구조  */
.carousel_main {
    width: 300px; /* 이미지 크기 설정  */
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    user-select: none;
}

.carousel_wrapper {
    display: flex;
    transition: transform 1s;
}

.carousel_slide {
    flex: 0 0 300px; /* 이미지 크기 설정  */
    position: relative;
}

.carousel_slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

carousel_main : position을 relative로 설정하고 이미지 크기를 조절합니다.

carousel_wrapper : display를 flex로 설정하고 transform으로 애니메이션을 넣어줍니다.

carousel_slide : 이미지 크기를 조절합니다.

2. CSS 코드 - 사이드 버튼

/* 캐러셀 사이드 버튼 */
.carousel_button_container {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.carousel_button {
    width: 50px;
    height: 50px;
    color: #fff;
    background: transparent;
    border: none;
    outline: none;
    cursor: pointer;
}

.carousel_prev {
    background-color: rgba(0, 0, 0, 0.3);
    border: 0px;
    padding-top: 5px;
    padding-bottom: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.carousel_next {
    background-color: rgba(0, 0, 0, 0.3);
    border: 0px;
    padding-top: 5px;
    padding-bottom: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

carousel_button_container : position을 absolute로 설정하고 버튼의 좌표를 입력합니다.

carousel_button : 버튼의 width와 height를 설정합니다.

carousel_prev / carousel_next : background-color로 투명도를 조절하고 center에 맞춰줍니다.

3. CSS 코드 - 중앙 버튼

/* 캐러셀 중앙 버튼 */
.carousel_pagination {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
}

.carousel_circle {
    width: 10px;
    height: 10px;
    background-color: #aaa;
    border-radius: 50%;
    margin: 0 5px;
    cursor: pointer;
}

.carousel_circle.active {
    background-color: #333;
}

carousel_pagination : position을 absolute로 설정하고 버튼의 좌표를 입력합니다.

carousel_circle : 중앙 버튼의 디자인을 스타일링합니다.

3. 캐러셀(Carousel) 슬라이드 만들기 - JavaScript

마지막으로 JavaScript 코드를 소개하겠습니다.

사이드 버튼과 중앙 버튼에 이벤트 리스너를 구현했습니다.

JavaScript 코드

const swiper = document.querySelector('.carousel_wrapper');
const prevButtons = document.querySelectorAll('.carousel_prev');
const nextButtons = document.querySelectorAll('.carousel_next');
const bullets = document.querySelectorAll('.carousel_circle');

let currentSlide = 0;

function showSlide(slideIndex) {
    swiper.style.transform = `translateX(-${slideIndex * 300}px)`;
    currentSlide = slideIndex;

    bullets.forEach((bullet, index) => {
        if (index === currentSlide) {
            bullet.classList.add('active');
        } else {
            bullet.classList.remove('active');
        }
    });
}

prevButtons.forEach((prevButton) => {
    prevButton.addEventListener('click', () => {
        if (currentSlide > 0) {
            showSlide(currentSlide - 1);
        }
    });
});

nextButtons.forEach((nextButton) => {
    nextButton.addEventListener('click', () => {
        if (currentSlide < 3) {
            showSlide(currentSlide + 1);
        }
    });
});

bullets.forEach((bullet, index) => {
    bullet.addEventListener('click', () => {
        showSlide(index);
    });
});

showSlide(0);

이미지 크기에 맞게 슬라이드 효과를 넣어줬습니다.

이전과 다음 버튼으로 슬라이드가 작동하게 만들었습니다.

4. 캐러셀(Carousel) 슬라이드 만들기 - 결과화면

총 4개의 이미지 넣어 슬라이드 효과를 표현했습니다.

자바스크립트를 사용해 사이드 버튼과 중앙 버튼이 작동하도록 설정했습니다.

1. 캐러셀(Carousel) 슬라이드 결과

2. 캐러셀(Carousel) 슬라이드 화면

글을 마치며 라이브러리 설치없이 쉽고 빠르게 캐러셀(Carousel) 슬라이드를 설치했습니다.

지금까지 긴 글 읽어주셔서 감사합니다.