swiper 시작하기
파일 다운받기(NPM)
https://swiperjs.com/get-started#installation
Getting Started With Swiper
Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.
swiperjs.com
링크 추가하기(CDN)
장점
- 간단하고 편함
- 업데이트 됐을 때 자동 적용
- 실무에서 보통 많이 사용
단점
- 이전버전을 쓰다 업데이트 됐을 경우 깨지거나 이슈가 있을 수 있음
(오류가 있다 수정된 경우/디자인이나 레이아웃 관련해선 적다고 함)
<head>
<link rel="stylesheet"
href="https://unpkg.com/swiper@7/swiper-bundle.min.css"/>
<script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>
</head>
기본구조
head에 링크추가 후 body에 swiper 추가 해준다
해당 클래스명이 없으면 슬라이더 작동이 안되기 때문에 필요한 클래스는 꼭! 넣어줄 것
<body>
<!-- Slider main container -->
<!-- 해당클래스명이 없으면 슬라이더 작동 불가능 -->
<div class="swiper-container">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<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 class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- 스크롤 필요시 추가 -->
<div class="swiper-scrollbar"></div>
</div>
</body>
기본 설정 및 옵션추가
body 맨 마지막에 스크립트를 열고 추가해줘야 함
<script>
const swiper = new Swiper('.swiper', {
// 옵션
direction: 'vertical',
loop: true,
slidesPerView: "auto",
autoplay: {
delay: 3000,
},
// 페이징 출력 시 추가
pagination: {
el: '.swiper-pagination',
},
// nav 화살표 출력 시 추가
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 스크롤 출력 시 추가
scrollbar: {
el: '.swiper-scrollbar',
},
});
</script>
- 옵션
autoplay: {
// 자동재생
delay: 3000,
// 시간 설정
disableOnInteraction: false,
// false로 설정 시 스와이프 후 자동 재생이 비활성화 되지 않음
}
allowTouchMove: true,
// false시 버튼으로만 슬라이드 조작
ally: false,
// 접근성 매개변수 (이건 아직 잘 모르겠음)
autoHeight: true,
// true로 설정시 슬라이더 래퍼가 현재 활성 슬라이드의 높이에 맞게 조정
centeredSlides: true,
// 슬라이드 가운데 여부
direction : 'horizontal',
// 슬라이드의 진행방향(horizontal = 가로(기본), vertical = 세로)
freeMode: false,
// 슬라이드 넘길 때 위치 고정 여부
loop : true,
// 반복 여부, false 일 경우 슬라이더 수 만큼 보여준 후 첫번째로 돌아오지 않음
loopAdditionalSlides : 1,
// 슬라이드 반복시 마지막 슬라이드에서 다음 슬라이드가 보여지지 않는 현상 수정
resistance: false,
// 슬라이드 터치에 대한 저항 여부
slidesPerView : 5,
// 한 슬라이드에 보여지는 갯수
spaceBetween : 10,
// 슬라이드 사이 여백
slideToClickedSlide: true,
// 해당 슬라이드 클릭시 슬라이드 위치로 이동
slidesOffsetBefore: 10,
// 슬라이드 시작 부분 여백
slidesOffsetAfter: 10,
// 슬라이드 마지막 부분 여백
watchOverflow: true,
// 슬라이드가 1개일 때 페이징, 버튼 숨김 여부
// 페이징버튼
pagination: {
el: '.pagination',
// 페이징 버튼 담을 태그 설정
clickable: true,
// 버튼 클릭 여부
type: 'bullets',
// 버튼 모양 선택(bullets, fraction)
}
// 반응형
breakpoints: {
720: {
// width 값
spaceBetween: 20,
}
}
활용 예시
<script>
const swiper = new Swiper('.swiper', {
direction: 'vertical',
loop: true,
});
// 변수 활용 예시
var slideSetting = {
slidesPerView: "auto",
spaceBetween: 10,
}
// 변수
const swiper = new Swiper('.swiper', slideSetting);
</script>
메소드
// ex) slide.autoplay.start()
.slideTo(index, speed, runCallbacks)
// 해당 슬라이드로 이동
.slidePrev(index, speed, runCallbacks)
// 이전 슬라이드로 이동
.slideNext(index, speed, funCallbacks)
// 다음 슬라이드로 이동
.autoplay.start();
// 자동 재생 시작
.autoplay.stop();
// 자동 재생 정지
.destroy();
// 슬라이드 제거
참고
https://swiperjs.com/swiper-api
Swiper API
Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.
swiperjs.com