Swiper 라이브러리
Swiper란 모바일 및 데스크탑에 사용하기 적합한 오프소스 JavaScript 라이브러리
Swiper 특징
- 모바일 및 데스크탑에서 모두 호환
- 반응형 웹사이트에 최적화
- 터치 스와이프 이벤트를 기반으로 한 슬라이드쇼 및 스와이퍼 기능을 지원
- css3기반으로 애니메이션을 지원
- 다양한 옵션을 제공하여 사용자가 자유롭게 슬라이드쇼 및 스와이퍼를 커스터마이징 가능
- 🖱 Swiper 이동
📌 Swiper 사용방법
Swiper 설치 방법
1) CDN을 이용한 방법
Swiper.js는 여러 개의 CDN을 제공하고 있습니다. 따라서 가장 간편하게 Swiper.js를 사용할 수 있는 방법 중 하나는, CDN을 이용하여 Swiper.js를 로드하는 것입니다.
<!-- CSS -->
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" /><!-- JS -->
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>2) 로컬 설치 방법
Swiper.js를 로컬에 다운로드하여 사용할 수도 있습니다. 이 방법은 Swiper.js의 소스코드를 직접 수정하거나 커스터마이징할 필요가 있을 때 유용합니다.
먼저, Swiper.js 소스코드를 다운로드 받은 후, HTML 파일에서 로드할 수 있도록 경로를 지정해주어야 합니다.
<!-- CSS -->
<link rel="stylesheet" href="path/to/swiper-bundle.min.css" />
<!-- JS -->
<script src="path/to/swiper-bundle.min.js"></script>위의 코드에서 path/to/를 Swiper.js 소스코드가 저장된 경로로 변경하여 사용하면 됩니다.
3) npm을 이용한 방법
npm을 이용하여 Swiper.js를 설치하는 방법도 있습니다. 이 방법은 npm을 사용하는 프로젝트에서 Swiper.js를 사용할 때 유용합니다.
먼저, npm 명령어를 이용하여 Swiper.js를 설치합니다.
npm install swiperSwiper.js가 node_modules 폴더에 설치되면, 이후 방법은 로컬 설치 방법과 동일합니다.
Swiper 옵션 설정
1. direction
- 슬라이드 방향을 설정합니다
- horizontal: 수평 방향 (기본 값)
- vertical: 수직 방향
const mySwiper = new Swiper('.swiper-container', {
direction: 'horizontal'
});2. loop
- 슬라이드 루프 설정 여부를 결정합니다.
- true: 무한 루프 (기본값)
- false: 루프 없음
const mySwiper = new Swiper('.swiper-container', {
loop: true
});3. autoplay
- 자동 재생 여부를 설정합니다.
- false: 자동 재생 끔 (기본값)
- true: 자동 재생 켬
- delay: 자동 재생 딜레이 시간 (ms)
const mySwiper = new Swiper('.swiper-container', {
autoplay: {
delay: 3000
}
});4. speed
- 슬라이드 애니메이션 속도를 설정합니다. (ms)
- 기본값은 300
const mySwiper = new Swiper('.swiper-container', {
speed: 500
});5. slidesPerView
- 한 번에 보여지는 슬라이드 수를 설정합니다.
- 1: 한 개씩 보이기 (기본값)
- 2: 두 개씩 보이기
- 3: 세 개씩 보이기
- auto: 슬라이드의 넓이나 높이에 따라 자동으로 계산
const mySwiper = new Swiper('.swiper-container', {
slidesPerView: 2
});6. pagination
- 페이징 설정 여부를 결정합니다.
- false: 페이징 끔 (기본값)
- true: 페이징 켬
- type: 페이징 종류 (bullets, dynamic, fraction, progressbar, custom)
const mySwiper = new Swiper('.swiper-container', {
pagination: {
el: '.swiper-pagination',
type: 'bullets'
}
});7. navigation
- 이전/다음 버튼 설정 여부를 결정합니다.
- false: 버튼 끔 (기본값)
- true: 버튼 켬
- nextEl: 다음 버튼 선택자
- prevEl: 이전 버튼 선택자
const mySwiper = new Swiper('.swiper-container', {
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});8. scrollbar
- 스크롤바 설정 여부를 결정합니다.
- false: 스크롤바 끔 (기본값)
- true: 스크롤바 켬
- hide: 스크롤바 숨김
- draggable: true 드래그 시에 나타냄
const mySwiper = new Swiper('.swiper-container', {
scrollbar: {
el: '.swiper-scrollbar',
hide: true
}
});9. effect
- 슬라이드 애니메이션 효과를 설정합니다.
- slide: 기본 슬라이드 효과 (기본값)
- fade: 페이드 효과
- cube: 큐브 효과
- coverflow: 커버플로우 효과
- flip: 플립 효과
const mySwiper = new Swiper('.swiper-container', {
effect: 'fade'
});추가옵션
- freeMode : false, // 슬라이드 넘길 때 위치 고정 여부
- autoHeight : true, // 현재 활성 슬라이드높이 맞게 높이조정
- a11y : false, // 접근성 매개변수(접근성 관련 대체 텍스트 설정이 가능)
- resistance : false, // 슬라이드 터치 저항 여부
- slideToClickedSlide : true, // 해당 슬라이드 클릭시 슬라이드 위치로 이동
- allowTouchMove : true, // (false-스와이핑안됨)버튼으로만 슬라이드 조작이 가능
- watchOverflow : true // 슬라이드가 1개 일 때 pager, button 숨김 여부 설정
- slidesOffsetBefore : number, // 슬라이드 시작 부분 여백
- slidesOffsetAfter : number,
예시
let swiper = new Swiper('#id', {
slidesPerView : 보여질 개수,
spaceBetween : 아이템 사이 간격,
slidesPerGroup : 한번에 슬라이딩될 개수,
centeredSlides: true, //센터모드
threshold:100, //마우스 스와이프 민감도
autoplay:{
delay: 2500, // 시간 설정
disableOnInteraction: false, // false-스와이프 후 자동 재생
loop: 무한반복 할지말지,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
pagination : { // 페이저 버튼 사용자 설정
el : '.pagination', // 페이저 버튼을 담을 태그 설정
clickable : true, // 버튼 클릭 여부
type : 'bullets', // 버튼 모양 결정 "bullets", "fraction"
renderBullet : function (index, className) { // className이 기본값이 들어가게 필수 설정
return '<a href="#" class="' + className + '">' + (index + 1) + '</a>'
},
renderFraction: function (currentClass, totalClass) { // type이 fraction일 때 사용
return '<span class="' + currentClass + '"></span>' + '<span class="' + totalClass + '"></span>';
}
},
scrollbar:{
el : '선택자',
draggable: 스크롤바 이동으로 스와이프가 가능하게 할지,
dragSize: 스크롤바 크기,
},
a11y: { // 웹접근성
enabled: true,
prevSlideMessage: '이전 슬라이드',
nextSlideMessage: '다음 슬라이드',
slideLabelMessage: '총 {{slidesLength}}장의 슬라이드 중 {{index}}번 슬라이드 입니다.',
},
breakpoints:{
280: {
//280px 이하의 크기에서 옵션 값
},
768 : {
//768px 이하의 크기에서 옵션 값
},
1024 : {
//1024px 이하의 크기에서 옵션 값
}
}
})반응형 설정
breakpoints : { // 반응형 설정이 가능 width값으로 조정
768 : {
slidesPerView : 1,
},
},
//5.3.0부터 "비율"(너비 / 높이)로 설정이 가능해졌습니다.
var swiper = new Swiper('.swiper-container', {
slidesPerView: 1,
spaceBetween: 10,
breakpoints: {
'@0.75': {
slidesPerView: 2,
spaceBetween: 20,
},
'@1.00': {
slidesPerView: 3,
spaceBetween: 40,
},
'@1.50': {
slidesPerView: 4,
spaceBetween: 50,
},
}
});메소드
swiper이름.메소드() 형식으로 사용할 수 있다.
// ex) mySlider.autoplay.start()
.slideTo(index, speed, runCallbacks) // 해당 슬라이드로 이동
.slidePrev(index, speed, runCallbacks) // 이전 슬라이드로 이동
.slideNext(index, speed, runCallbacks) // 다음 슬라이드로 이동
.autoplay.start(); // 자동 재생 시작
.autoplay.stop(); // 자동 재생 정지
.destroy() // 슬라이드 제거다음 ,이전 슬라이드 미리 보기
//방법 1
var swiper = new Swiper('.m_swiper', {
loop: true,
loopFillGroupWithBlank: true,
spaceBetween: 8, // 슬라이드 간격
slidesPerView: 1.08, // 한번에 보이는 슬라이드 갯수
centeredSlides: true, // 양쪽 미리보기
pagination: {
el: '.swiper-pagination',
type: 'fraction',
},
});
//방법 2
slidesPerView: ‘auto’,
.swiper slide {width: 93%} 로 가로값 강제하기딜레이 없이 smooth 하게 이미지 넘기기
.swiper-wrapper {
transition-timing-function: linear;
}
var swiper = new Swiper(".swiper", {
loop: true,
centeredSlides: true,
speed: 7000,
autoplay: {
delay: 0,
disableOnInteraction: false
},
slidesPerView: 'auto',
});📌 Swiper 장단점
Swiper의 장점
- 사용 방법이 간편
- 다양한 옵션과 효과를 제공하여 터치 스와이프 이벤트를 기반으로 한 슬라이드쇼 및 스와이퍼 기능을 지원
- 반응형 웹 디자인을 지원하므로, 모바일 환경에서도 이용 가능
- 마크업 코드와 스타일 코드를 분리하여 작성할 수 있어, 유지보수가 용이
- 유연하게 커스터마이징 가능
Swiper의 단점
- Swiper.js의 버전 업그레이드가 늦어질 때가 있어, 기능 추가를 기다려야 할 수도 있음
- 기능이 많아 복잡할 수 있음
아자아자 파이팅🔥