Swiper.js는 웹사이트나 모바일 앱에서
이미지나 텍스트를 옆으로 넘겨볼 수 있는
슬라이더(정식 명칭은 터치 슬라이퍼, Carousel)를 만들 때 사용하는
가장 유명한 자바스크립트 라이브러리입니다.
https://swiperjs.com/get-started
모바일 환경에서 손가락으로 쓱쓱 넘기는 터치 스와이프 반응 속도가 매우 부드럽고, PC에서도 마우스 드래그를 완벽하게 지원해서 현재 웹 개발에서 사실상 표준(De-facto standard)으로 쓰이고 있습니다.
💡 Swiper.js를 사용하는 이유
- 모바일 최적화: 손가락 터치 제스처에 아주 민감하고 부드럽게 반응합니다.
- 다양한 기능: 자동 재생, 무한 반복(Loop), 페이지 번호 표시(Pagination), 이전/다음 버튼, 마우스 휠 제어 등 웬만한 기능은 다 들어있습니다.
- 프레임워크 지원: 그냥 HTML/CSS/JS뿐만 아니라 React, Vue, Angular 등에서도 쉽게 쓸 수 있도록 공식 지원합니다.
🛠️ Swiper.js 아주 쉽게 사용하기 (기본 HTML 기준)
가장 기본적이고 직관적인 HTML 파일에 바로 적용하는 방법입니다. 크게 3단계(연결하기 ➡️ 구조 만들기 ➡️ 실행하기)만 기억하세요!
1단계: CDN 링크 연결하기
HTML 파일의 <head> 태그 안에 CSS 스타일을, </body> 태그 바로 위에 JS 파일을 넣어줍니다.
HTML
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
</body>
2단계: HTML 구조 만들기
Swiper가 인식할 수 있도록 지정된 클래스명(swiper, swiper-wrapper, swiper-slide)을 정확히 사용해야 합니다.
HTML
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">슬라이드 1</div>
<div class="swiper-slide">슬라이드 2</div>
<div class="swiper-slide">슬라이드 3</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
3단계: 자바스크립트로 실행하기
HTML 구조까지 만들었다면, JS 코드로 Swiper를 작동시키고 원하는 옵션을 켜줍니다.
HTML
<script>
const swiper = new Swiper('.swiper', {
// 옵션 설정
direction: 'horizontal', // 슬라이드 방향 (가로)
loop: true, // 무한 반복 여부
// 페이지 번호(점)가 필요하다면
pagination: {
el: '.swiper-pagination',
clickable: true, // 점을 클릭했을 때 이동 가능하게
},
// 좌우 화살표 버튼이 필요하다면
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// (보너스) 자동 재생을 원한다면 추가
autoplay: {
delay: 3000, // 3초마다 자동으로 넘어감
}
});
</script>
🎨 CSS로 최소한의 스타일 잡기 (참고)
슬라이더가 제대로 보이려면 화면에 크기가 잡혀있어야 합니다. CSS로 간단히 크기를 지정해 주세요.
CSS
.swiper {
width: 600px;
height: 400px;
}
.swiper-slide {
display: flex;
justify-content: center;
align-items: center;
background: #eee;
font-size: 24px;
}
💡 꿀팁: > 만약 3D 효과(Coverflow, Flip), 카드 스타일 등 화려한 효과를 넣고 싶다면 Swiper.js 공식 홈페이지 데모(Demo)에 방문해 보세요. 전 세계 개발자들이 만들어 둔 수십 가지 예제 코드를 복사해서 바로 쓸 수 있습니다!
'New' 카테고리의 다른 글
| DOMContentLoaded를 쓰는 이유 (1) | 2026.06.10 |
|---|---|
| Swiper.js (0) | 2026.06.08 |
| Crew only - UI Project Directory completion (1) | 2026.06.07 |
| Portfolio index setting (1) | 2026.06.07 |
| UI Project Directory completion (1) | 2026.06.07 |