[플러그인/슬라이드] swiper v5부터 ie 미지원!
어제 인터넷 사업하는 친구에게서 연락이 왔다. 친 : 야, 플래시 왜 이래? 나 : 12월 31일에 플래시랑 이별인사 안 했어?ㅎ 했어야지~ 보내줘~ 친 : 슬라이드가 안돼! 나 : 응? 에??? 슬라이드가 플래
fresh-mint.tistory.com
1. css
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">위와 같이 CDN을 가져와도 되고, 다운로드하여 사용해도 된다. 단, 내용 변경은 안되고, 커스텀은 프로젝트.css에서 선택자를 가져와 수정한다. (최신버전의 CDN 혹은 파일다운로드는 공식 사이트: https://swiperjs.com 에서, 이전 버전은 https://cdnjs.com/libraries/Swiper 에서 확인 가능하다)
1-1. scss
<link rel="stylesheet" href="https://unpkg.com/swiper@6.4.5/swiper.scss">
2. html / script
<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>html: 구조만이 아니라 클래스명들도 모두 동일하게 들어가야 한다. 슬라이드가 여러개일 시, swiper-container에 특정 클래스명을 추가해 각각의 슬라이드를 제어한다.
// 옵셥 사용하지 않을 경우
// 기본형(default)
// : pager, prev/next button 하나 없이, 아~주~ 깔끔한~ full size의 슬라이드가 구현된다.
const 변수1 = new Swiper('.스와이트-컨테이너-클래스명1')
// 옴션 사용할 경우
const 변수2 = new Swiper('.스와이트-컨테이너-클래스명2', {
// option 삽입
})script: 슬라이드가 여러개일시, 변수명이 모두 다르게 들어가야 한다. 동일명으로 들어갈 시, 보다 위에 있는 스크립트는 먹통이 된다.
+ pager: (★)에 삽입
<div class="클래스명"></div>const swiper = new Swiper('.swiper-container', {
pagination: {
el: '.클래스명'
}
})+ prev/next button: (★)에 삽입
<div class="클래스명A"></div>
<div class="클래스명B"></div>const swiper = new Swiper('.swiper-container', {
navigation: {
nextEl: '.클래스명A', // 다음으로 가기
prevEl: '.클래스명B' // 이전으로 가기
}
})+ scrollbar: (★)에 삽입
<div class="클래스명"></div>const swiper = new Swiper('.swiper-container', {
scrollbar: {
el: '.클래스명'
}
})2. 옵션
swiper는 정~말~ 다양한 옵션들이 있는데, 실무 작업시 자주 사용하는 옵션만 정리해보았다.
| Parameter | Type | default | 기능 |
| speed | number | 300 | 슬라이드 속도 |
| spaceBetween | number | 0 | 슬라이드 간 여백 |
| slidesPerView | number 또는 'auto' | 1 | 한 화면에 들어오는 슬라이드 갯수, 'auto'는 각 슬라이드 넓이에 맞게 자동 설정하는 것으로, loop 함께 사용시 loopedSlides도 활성화 시켜야 함 |
| centeredSlides | boolean | false | 한 화면에 여러개의 슬라이드가 들어오는 경우, 활성화된 슬라이드 가운데 배치 |
| loop | boolean | false | 무한 스와이프 |
| autoplay | boolean 또는 object | - | 자동 슬라이드 설정시, true로 변경하고, 옵션을 추가 하고 싶을 땐, 아래와 같이 오브젝트화 |
| delay | number | 3000 | 자동 슬라이드시, 한 슬라이드에 머무르는 시간 |
| pagination / type | "bullets", "fraction", "progressbar" 또는 "custom" | bullets | bullets: 불렛 형 fraction: '1/3'과 같이 '현재 슬라이드 index/슬라이드 총수'로 표기 progressbar: 프로그레스바 형 |
| watchOverflow | boolean | false | 슬라이드되기 충분하지 않는 슬라이드 수 일경우, 슬라이드 비활성화 단, swiper 버전을 탐 예: 슬라이드가 한 개일 시, 슬라이드 모양(css 적용)은 하고 있으나, 스크립에서 지정한 "모든" 슬라이드 기능은 비활성화됨 |
| breakpoints | object | - | 반응형 슬라이드: 화면 넓이에 따라 레이아웃 변경 단, slidesPerView, slidesPerGroup, spaceBetween, slidesPerColumn만 변경 설정 가능(5.3.0 이상부터는 ratio 지원) |
| mousewheel | boolean 또는 object | false | 마우스휠로 슬라이드 이동 |
| thumbs | object | - | "슬라이드 + 썸네일 슬라이드" 형의 슬라이드 구형 |
var mySwiper = new Swiper('.swiper-container', {
autoplay: {
delay: 5000,
},
pagination: {
el: '.swiper-pagination',
type: 'fraction'
},
breakpoints: {
// 화면의 넓이가 320px 이상일 때
320: {
slidesPerView: 2,
spaceBetween: 20
},
// 화면의 넓이가 640px 이상일 때
640: {
slidesPerView: 4,
spaceBetween: 40
}
}
});Swiper API
Swiper API Improve this Doc Swiper Full HTML Layout Slide 1 Slide 2 Slide 3 ... Styles Swiper package contains different sets of CSS, Less and SCSS styles: CSS Styles CSS styles for bundle version: swiper-bundle.css - all Swiper styles including all compon
swiperjs.com
3. 통합 샘플
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>swiper | slide</title>
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<style>/* 임시 삽입: 확인용 */
.swiper-container{height: 300px;}
</style>
</head>
<body>
<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 class="swiper-prev"></div>
<div class="swiper-next"></div>
<div class="swiper-scrollbar"></div>
</div>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script>
const swiper = new Swiper('.swiper-container', {
loop: true,
pagination: {
el: '.swiper-pagination'
},
navigation: {
nextEl: '.swiper-next',
prevEl: '.swiper-prev'
}
})
</script>
</body>
</html>'javascript > library' 카테고리의 다른 글
| [slide] slick 아이템에 여백 추가하는 방법 How add spaces between Slick item (0) | 2021.10.23 |
|---|---|
| [slide] swiper v5부터 ie 미지원! (0) | 2021.01.16 |
| [툴팁] tooltip, 쉽고 쉽게 만들기: tippy.js (0) | 2021.01.12 |
| [slide] slick 사용법(+반응형) How to use slick.js (2) | 2021.01.10 |
댓글