Swiper.js CDN으로 반응형 이미지 슬라이더 만드는 방법 (초보자용 가이드)

FRONTEND / UI LIBRARY

Swiper.js 기본 사용법 – CDN으로 간단하게 반응형 슬라이더 만들기

Swiper.js 3.x 버전을 CDN으로 불러와서 간단한 반응형 슬라이더를 만드는 방법을 예제 코드와 함께 정리했습니다. Swiper 컨테이너 구조, 슬라이드 생성, 페이지네이션 설정까지 한 번에 따라 해보세요.

1. Swiper.js란 무엇인가?

Swiper는 모바일 친화적인 터치 슬라이더 라이브러리로, 다음과 같은 특징이 있습니다.

모바일 터치 제스처 지원 (드래그/스와이프)
반응형 레이아웃 지원
슬라이드, 페이징, 네비게이션 버튼 등 기본 기능 제공
이미지 슬라이더, 배너 롤링, 컨텐츠 캐러셀 등에 활용

아래 예제는 Swiper 3.4.2 버전을 기준으로 작성된 코드이며, 구버전 프로젝트나 jQuery와 함께 사용하는 환경에서도 바로 적용할 수 있습니다.

2. 전체 예제 코드 한 번에 보기

먼저, Swiper 슬라이더를 만드는 전체 HTML 예제를 먼저 확인해 봅시다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Swiper demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

    <!-- Swiper CSS (CDN) -->
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.css">

    <style>
    html, body {
        position: relative;
        height: 100%;
    }
    body {
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color: #000;
        margin: 0;
        padding: 0;
    }
    .swiper-container {
        width: 100%;
        height: 100%;
    }
    .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;

        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }
    </style>
</head>
<body>

    <!-- Swiper 컨테이너 -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">Slide 1</div>
            <div class="swiper-slide">Slide 2</div>
            <div class="swiper-slide">Slide 3</div>
            <div class="swiper-slide">Slide 4</div>
            <div class="swiper-slide">Slide 5</div>
            <div class="swiper-slide">Slide 6</div>
            <div class="swiper-slide">Slide 7</div>
            <div class="swiper-slide">Slide 8</div>
            <div class="swiper-slide">Slide 9</div>
            <div class="swiper-slide">Slide 10</div>
        </div>

        <!-- 페이지네이션 영역 -->
        <div class="swiper-pagination"></div>
    </div>

    <!-- Swiper JS (CDN, jQuery 버전) -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.jquery.js"></script>

    <!-- Swiper 초기화 코드 -->
    <script>
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: true
    });
    </script>
</body>
</html>

💡 TIP: 실제 서비스에서는 Slide 1 텍스트 대신 이미지 태그나 카드 레이아웃을 넣으면 배너 슬라이더, 상품 슬라이더로 쉽게 확장할 수 있습니다.

3. Swiper 슬라이더 구조 이해하기

Swiper 슬라이더는 기본적으로 다음과 같은 3단 구조를 가집니다.

.swiper-container : 슬라이더 전체를 감싸는 최상위 컨테이너
.swiper-wrapper : 슬라이드들을 묶는 래퍼(wrapper)
.swiper-slide : 실제 한 장의 슬라이드 (반복되는 요소)

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>

    <!-- 페이지네이션 영역 (선택) -->
    <div class="swiper-pagination"></div>
</div>

Swiper는 이 클래스 이름을 기준으로 내부에서 슬라이더 기능을 적용합니다. 클래스명이 다르면 제대로 동작하지 않으니 그대로 사용하는 것이 좋습니다.

4. Swiper CDN으로 CSS와 JS 불러오기

예제에서는 cdnjs CDN을 사용해서 Swiper CSS와 JS를 불러오고 있습니다.

4-1. CSS 링크

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.css">

4-2. JS 스크립트

<script src="//cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.jquery.js"></script>

⚠️ 주의: 이 예제는 Swiper 3.4.2와 swiper.jquery.js를 사용합니다. 최신 Swiper 8+ 버전은 초기화 코드와 파일명이 조금 다르니, 신규 프로젝트라면 버전에 맞는 공식 문서를 꼭 확인하세요.

5. JavaScript로 Swiper 초기화하기

HTML 구조를 만들고, Swiper JS를 불러왔다면 마지막으로 초기화 코드 한 줄로 슬라이더를 활성화할 수 있습니다.

var swiper = new Swiper('.swiper-container', {
    pagination: '.swiper-pagination',
    paginationClickable: true
});

new Swiper('.swiper-container', { ... }): .swiper-container 클래스를 가진 요소에 슬라이더를 생성합니다.
pagination: '.swiper-pagination': 페이지네이션(밑에 점) 영역으로 사용할 요소의 선택자
paginationClickable: true: 페이지네이션 점을 클릭해서 슬라이드를 이동할 수 있도록 허용

6. 실제 프로젝트 응용 및 정리

텍스트 대신 이미지와 링크를 조합하면 간단한 배너 슬라이더를 만들 수 있습니다.

<div class="swiper-slide">
    <a href="/event/123">
        <img src="/images/banner01.jpg" alt="이벤트 배너 1">
    </a>
</div>

여기까지 따라 했다면, 기본적인 Swiper 반응형 슬라이더는 이미 완성된 것입니다. 이후에는 autoplay, loop, slidesPerView 등 다양한 옵션을 추가해서 자사 서비스나 블로그 디자인에 맞게 커스터마이징 해보세요.

CSS로 레이어 팝업 화면 가운데 정렬하는 방법 (top·left·transform 완전 정리)

레이어 팝업 센터 정렬, 이 코드만 알면 끝 (CSS 예제 포함) 이벤트 배너나 공지사항을 띄울 때 레이어 팝업(center 정렬) 을 깔끔하게 잡는 게 생각보다 어렵습니다. 화면 크기가 변해도 가운데에 고정되고, 모바일에서도 자연스럽게 보이게 하려면 position , top , left , transform 을 정확하게 이해해야 합니다. 이 글에서는 아래 내용을 예제로 정리합니다. 레이어 팝업(center 정렬)의 기본 개념 자주 사용하는 position: absolute / fixed 정렬 방식 질문에서 주신 스타일 top: 3.25%; left: 50%; transform: translateX(-50%) 의 의미 실무에서 바로 쓰는 반응형 레이어 팝업 HTML/CSS 예제 1. 레이어 팝업(center 정렬)이란? 레이어 팝업(레이어 팝업창) 은 새 창을 띄우는 것이 아니라, 현재 페이지 위에 div 레이어를 띄워서 공지사항, 광고, 이벤트 등을 보여주는 방식을 말합니다. 검색엔진(SEO) 입장에서도 같은 페이지 안에 HTML이 존재 하기 때문에 팝업 안의 텍스트도 정상적으로 인덱싱될 수 있습니다. 즉, “레이어 팝업 센터 정렬”, “레이어 팝업 만드는 방법”과 같이 관련 키워드를 적절히 넣어주면 검색 노출에 도움이 됩니다. 2. 질문에서 주신 레이어 팝업 스타일 분석 질문에서 주신 스타일은 다음과 같습니다. <div class="layer-popup" style="width:1210px; z-index:9001; position:absolute; top:3.25%; left:50%; transform:translateX(-50%);"> 레이어 팝업 내용 <...

이 블로그 검색