안녕하세요, 맑은커뮤니케이션의 퍼블리셔 윤상원입니다.
오늘은 IE10 이상을 지원하는 페이지 작업을 할 때 유용하게 쓰이는 Swiper에 대해 정리해보았습니다.
사용 방법
1단계: 연결(두 가지 방법)
1. 파일을 다운로드하지 않고 html에서 CDN 연결
<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">
2. 파일을 다운로드해서 html 연결
https://github.com/nolimits4web/swiper/archive/v5.3.0.zip
예시)
<!DOCTYPE html>
<html lang="ko">
<head>
...
<link rel="stylesheet" href="path/to/swiper.min.css">
</head>
<body>
...
<script src="path/to/swiper.min.js"></script>
</body>
</html>CSS, JS 파일은 package 폴더 안에서 찾아볼 수 있습니다.
2단계: 기본 레이아웃 추가
<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>swiper-container > swiper-wrapper > swiper-slide 순으로 감싸져있어야 하고,
swiper-slide가 슬라이드의 내용이 됩니다.
3단계: 자바스크립트에서 Swiper 초기화
new Swiper('.swiper-container');swiper-container라는 클래스 이름은 변경하지 않아야 합니다.
예제
See the Pen 간단한 스와이퍼 예제 by 윤 시대 (@yoonsangwon) on CodePen.
다른 옵션을 넣지 않고 1번부터 3번까지의 내용을 적용한 예제입니다.
슬라이드 옵션
Swiper에는 다양한 옵션들이 있습니다.
옵션을 사용하면 마우스로만 움직이는 슬라이드를 버튼 클릭으로 움직이게 하거나,
아무런 동작을 하지 않아도 자동으로 슬라이드가 넘어가게 하는 등 사용자가 더 편리하게 이용할 수 있습니다.
슬라이드 옵션 예제
See the Pen 슬라이드 옵션 by 윤 시대 (@yoonsangwon) on CodePen.
예제처럼 필요한 옵션과 값을 적어주면 적용할 수 있습니다.
동작이 아닌 버튼이나 스크롤 바가 생기는 등의 옵션은 해당 html 코드도 같이 넣어주어야 합니다.
옵션 적용하는 방법
사용방법 3번이 Swiper를 초기화하는 방법(한 줄)이었다면 옵션을 추가할 때는 코드의 모양이 바뀌어야 합니다.(여러 줄)
옵션이 필요없을 때
new Swiper('.swiper-container');
옵션을 적용해야 할 때
var mySwiper = new Swiper('.swiper-container', {
// 여기에 옵션을 넣어야 합니다.
});
자주 사용하는 옵션 목록 ('더보기'를 클릭하면 옵션을 볼 수 있습니다)
Navigation(페이지를 넘기는 버튼)
[HTML]
<div class="swiper-button-prev"></div> // 이전 페이지
<div class="swiper-button-next"></div> // 다음 페이지[Javascript]
var mySwiper = new Swiper('.swiper-container', {
navigation: {
prevEl: '.swiper-button-prev',
nextEl: '.swiper-button-next',
},
});See the Pen rNVevqd by 윤 시대 (@yoonsangwon) on CodePen.
Pagination(페이지의 순서를 나타내는 불릿)
[HTML]
<div class="swiper-pagination"></div>[Javascript]
var mySwiper = new Swiper('.swiper-container', {
pagination: {
el: '.swiper-pagination',
type: 'bullets',
},
});See the Pen WNvwJLp by 윤 시대 (@yoonsangwon) on CodePen.
자동 재생(1000 = 1초)
[Javascript]
var mySwiper = new Swiper('.swiper-container', {
autoplay: {
delay: 2000,
},
});See the Pen ExjKLGe by 윤 시대 (@yoonsangwon) on CodePen.
한 번에 여러 장의 슬라이드를 표현하는 방법 + 슬라이드 무한 반복
[Javascript]
var swiper = new Swiper('.swiper-container', {
slidesPerView: 3, // 보여지는 슬라이드 수
spaceBetween: 30, // 슬라이드 간의 거리(px 단위)
loop: true, // 슬라이드 무한 반복
centeredSlides: true, // 다음 슬라이드의 모습이 50%만 보입니다.(중앙)
});See the Pen xxGVJZO by 윤 시대 (@yoonsangwon) on CodePen.
스와이퍼 홈페이지에서 더 많은 옵션과 예제를 확인할 수 있습니다.
예제: https://swiperjs.com/demos/
홈페이지에는 나오지 않는 방법들
한 페이지에서 스와이퍼를 여러 번 사용해야 할 때 선언하는 방법
스와이퍼를 한 페이지에서 여러 번 사용할 때가 있습니다.
그럴 때는 swiper-container 클래스마다 추가로 클래스를 넣고, 각자의 클래스를 스크립트에 선언해주면 됩니다.
[HTML]
// 첫번째 슬라이드입니다.
<div class="swiper-container swiper1">
<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>
// 두번째 슬라이드입니다.
<div class="swiper-container swiper2">
<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>
[Javascript]
// 첫번째 슬라이드에 추가한 클래스를 선언해주세요.
var swiper1 = new Swiper('.swiper1', {
// 옵션을 넣어주세요.
});
// 두번째 슬라이드에 추가한 클래스를 선언해주세요.
var swiper2 = new Swiper('.swiper2', {
// 옵션을 넣어주세요.
});
슬라이드 버튼을 swiper-container 밖으로 이동시키는 방법
작업을 하다보면 슬라이드의 버튼을 컨테이너 밖으로 이동시키고 싶은데 화면에서 사라질 때가 있습니다.
그 이유는 .swiper-container 안에 들어간 overflow:hidden 속성 때문인데요,
슬라이드를 사용하기 위해선 overflow 속성을 끌 수 없으니 이 방법을 사용하면 해결할 수 있습니다.
[HTML] - 기존
<div class="swiper-container">
<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-button-prev"></div> <!-- 이전 페이지 -->
<div class="swiper-button-next"></div> <!-- 다음 페이지 -->
</div>[HTML] - 수정 후
<div> // 임의의 DIV
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">슬라이드 1</div>
<div class="swiper-slide">슬라이드 2</div>
<div class="swiper-slide">슬라이드 3</div>
</div>
</div>
<div class="swiper-button-prev"></div> <!-- 이전 페이지 -->
<div class="swiper-button-next"></div> <!-- 다음 페이지 -->
</div>기존에 .swiper-container 안에 있던 버튼 두 가지를 밖으로 빼내고 전체를 임의의 div를 새로 감싼 모습입니다.
그리고 이제 새로 감싼 div에 position:relative를 추가하고,
.swiper-container에 있던 position:relative를 position:static 으로 변경해주시면 됩니다.
[결과 화면]
감사합니다.
'javascript' 카테고리의 다른 글
| [TweenMaxㆍGSAP] 트윈맥스 제대로 배우기1 - 입문(세팅방법) (0) | 2021.09.28 |
|---|---|
| [임시, 비공개] Swiper 수정 예정 글 (0) | 2021.06.17 |
| placeholder 제대로 사용하기 (2) | 2019.01.17 |
| jQuery란 무엇인가? jQuery 메서드 정리표 2편 (0) | 2018.11.13 |
| jQuery란 무엇인가? jQuery 메서드 정리표 1편 (0) | 2018.10.15 |
FlexSlider.zip
cycle.html
