← 목록

혁신적인 솔루션

미래를 바꾸는 기술로 새로운 가능성을 열어갑니다

자세히 보기

창의적인 디자인

사용자 경험을 중심으로 한 직관적이고 아름다운 디자인

포트폴리오 보기

글로벌 서비스

전 세계 어디서나 이용할 수 있는 안정적이고 빠른 서비스

서비스 시작

지속가능한 성장

환경을 생각하는 친환경 기술로 지속가능한 미래를 만듭니다

친환경 정책

함께하는 여정

고객과 함께 성장하는 파트너가 되겠습니다

연락하기

🌟 풀스크린 슬라이더 구현 코드

HTML 구조

<div class="swiper fullscreen-swiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <div class="slide-overlay"></div>
            <div class="slide-content">
                <h1>제목</h1>
                <p>설명</p>
                <a href="#" class="cta-button">버튼</a>
            </div>
        </div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
</div>

JavaScript

var fullscreenSwiper = new Swiper(".fullscreen-swiper", {
    direction: "horizontal",
    loop: true,
    autoplay: {
        delay: 5000,
        disableOnInteraction: false,
    },
    pagination: {
        el: ".swiper-pagination",
        clickable: true,
    },
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
    keyboard: {
        enabled: true,
    },
    mousewheel: true,
    speed: 1000,
    effect: "slide",
});

CSS 핵심 스타일

/* 풀스크린 설정 */
.swiper {
    width: 100%;
    height: 100vh;
}

/* 슬라이드 오버레이 */
.slide-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.4);
}

/* 애니메이션 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

활용 분야