Parameter
| parameter | 내용 |
|---|---|
| allowSlideNext | false로 하면 다음으로 안넘어감 |
| allowSlidePrev | false로 하면 이전으로 안넘어감 |
| allowTouchMove | false로 하면 다음,이전으로 안넘어감. 외부 API(slidePrev,slideNext)써야 넘어갈 수 있음 |
| autoHeight | 슬라이드마다 높이가 다를 때 그 높이에 맞춰서 스와이핑되도록 |
| breakpoints | slidePerView/spaceBetween을 반응형 사이즈별로 지정할 수 있음 |
| breakpointsBase | breakpoint 잡을 때 기준을 window 나 container 크기로 잡음 (아직 beta) |
| centerInsufficientSlides | slidePerView에서 잡은 숫자보다 슬라이드가 적을 때 센터로 잡아줌. loop모드나 grid.rows 랑 같이 사용하지 말것 |
| centeredSlides | 현재 슬라이드가 센터로 오게 |
| centeredSlidesBounds | 슬라이더 처음이나 끝에 갭을 추가 하지 않고 현재슬라이드를 센터로 오게 함. centeredSlides랑 같이 써야하고, loop나 pagination은 같이 쓰지 말것 |
| containerModifierClass | 다른 파라미터에 따라 스와이퍼 컨테이너에 추가될 수 있는 modifier css 클래스의 시작 |
| createElements | true하면 swiper-wrapper가 있는 슬라이드를 자동으로 감싸고, 필요한 네이게이션,페이지네이션,스크롤바를 위한 요소를 생성한다. |
| cssMode | true하면 최신 css 스크롤 스냅 api를 사용한다. 다 지원하지는 않고, cube와 card효과/스피드 파라미터/ slidePerGroup 등은 지원이 안된다. |
| direction | 슬라이드 방향을 평행/수직으로 할 수 있다. |
| edgeSwipeDetection | true하면 앱에서 swipe-back을 위한 이벤트를 시작해준다 |
| edgeSwipeThreshold | 앱에서 swipe-back을 위한 터치이벤트를 시작하기 위한 왼쪽 끝 영역(px) |
| effect | 트랜지션 효과. ‘slide’,‘fade’,‘cube’ 등등 |
| enabled | false하면 모든 네비게이션 요소를 숨기고 어떤 이벤트나 인터렉션에도 반응하지 않음 |
| focusableElements | 포커스하려는 요소의 css선택자. 포커스되면 스와이프가 거기서 멈춰있을 것이다. |
| followFinger | false하면 손가락 멈추어있으면 안 넘어감 |
| grabCursor | true하면 스와이퍼에 hover했을 때 “grab”커서를 보게 될 것이다. |
| height | 높이를 강제로 지정한다. |
| initialSlide | slide index지정하여 시작 슬라이드를 정함 |
| longSwipes | false하면 long swipes를 막음 |
| longSwipesMs | long swipes 동안 스아이프 전환하는 최소시간 |
| loop | true하면 무한히돌아가게 |
| loopAdditionalSlids | 한바뀌 돌고나서 복제할 슬라이드를 몇 개 추가할 것인가 |
| loopFillGroupWithBlank | true이고 loop모드이면 빈 슬라이드로 인한 부족한 개수를 채워준다.slidesPerGroup과 함께 사용하면 좋다. |
| loopPreventsSlide | true하면 이미 슬라이드 넘어가고있을때는 추가로 트랜지션 주지 않는다. |
| loopedSlides | slidesPerView:“auto”이고 loop모드일 때 루프에 몇 개의 슬라이드가 들어가야 하는지 지정해주어야 한다. |
| maxBackfaceHiddenSlides | 총 슬라이드가 지정값보다 작으면 사파리에서 “flicker”를 줄임 |
| modules | 스와이퍼 모듈 배열 |
| nested | ture하면 터치 이벤트 인터셉션을 교정해줌 |
| noSwiping | noSwipingClass지정된 요소의 스와이핑을 막을 수 있음 |
| noSwipingSelector | noSwipingClass대신 쓸 수 있다. |
| normalizeSlideIndex | 슬라이드 인덱스 정상화 |
| observeParents | true하면 swiper 부모요소에서 잘못된 부분이 있는지 알 필요가 있을 때 |
| observer | true하면 스와이퍼의 돌연변이를 찾을 수 있다. 스타일을 바꾸거나 (예:hide/show) 자식 요소를 바꾸는 경우(예:슬라이드 추가/삭제)스와이퍼는 업데이트 될 것이다. |
| on | 이벤트 핸들러 등록 |
| passiveListeners | 모바일 디바이스에서 성능을 올려줄 수 있는 곳에서 수동적 이벤트 리스너가 사용됨. e.preventDefault랑 같이 쓰지 말아야. |
| preloadImages | true면 모든 이미지를 로드하도록 만든다. |
| preventClicks | true면 클릭안되게 해줌 |
| preventClicksPropagation | true면 스와이핑하는 동안 링크로 이동하는 것을 막아준다. |
| preventInterationOnTransition | ture면 슬라이드 이동 중에 페이지네이션을 클릭한다던가 하는 변화를 막아준다. |
| resistance | false면 저항 바운스를 비활성화 |
| resistanceRatio | 저항 비율을 컨트롤 할 수 있다. |
| resizeObserver | true면 컨테이너 리사이즈를 감지한다. |
| rewind | true면 “rewind”모드가 된다. 첫번째 페이지네이션에서 앞으로가기를 클릭했을 때 마지막페이지로 가는 것. loop랑 같이 사용하지 말 것. |
| roundLengths | true면 슬라이드의 높이,너비를 반올림 시켜줘서 폰트가 흐려지는 것 방지한다. |
| runCallbackOnInit | swiper initialization에서 트랜지션/슬라이드체인지/시작/끝 이벤트를 발생시킨다. 첫 슬라이드 인덱스가 0이 아니거나 루프모드일 때 사용한다. |
| setWrapperSize | true면 swiper-wrapper의 높이/너비를 슬라이드 사이즈 기준으로 해준다. flex가 안먹히는 브라우져에서 사용한다. |
| shortSwipes | false라면 short swipes를 막는다. |
| simulateTouch | ture라면 마우스 이벤트를 허락한다. |
| slideActiveClass | 현재 슬라이스의 css 클래스 |
| slideBlankClass | loop모드이고 loopFillGroupWidthBlank이면 빈 슬라이드의 css 클래스 |
| slideClass | 슬라이드의 css 클래스 |
| slideDuplicateActiveClass | 현재 슬라이드를 대신한 복제된 슬라이드의 클래스명 |
| slideDuplicateClass | loop모드로 인해 복제된 슬라이드의 클래스명 |
| slideDuplicateNextClass | 현재 슬라이드의 다음슬라이드가 복제된 슬라이드의 클래스명 |
| slideDuplicatePrevClass | 현재 슬라이드의 이전 슬라이드가 복제된 슬라이드의 클래스명 |
| slideNextClass | 현재 슬라이드의 바로 다음 슬라이드의 클래스명 |
| slidePervClass | 현재 슬라이드의 바로 이전 슬라이드의 클래스명 |
| slideToClickedSlide | ture이면 어떤 슬라이드를 클릭하든 그 슬라이드로 간다. |
| slideVisibleClass | 현재 보여지는 슬라이드의 클래스명 |
| slidesOffsetAfter | 컨테이너 안에 모든 슬라이드가 끝났을 때 공간을 추가함(px) |
| slidesOffsetBefore | 컨테이너 안에 슬라이드가 시작되기 전 공간을 추가함(px) |
| slidesPerGroup | 그룹 형제들과 같이 묶일 슬라이드 수. slidesPeView>1이랑 같이 사용하면 좋다. |
| slidesPerGroupAuto | slidesPerView:“auto”,slidesPerGroup:1과 함꼐 써야한다. |
| slidesPerGroupSkip | 1이상이면 초기 n개의 슬라이드가 한 그룹으로 묶이고, 반면에 다른 슬라이드는 slidesPerGroup의 값에 의해 묶인다. |
| slidesPerView | 슬라이드 몇 개 보여줄지 |
| spaceBetween | 슬라이드 간 간격(px) |
| speed | 속도(ms) |
| swipeHandler | 스와이핑 핸들러가 있을 때 사용가능한 페이지네이션이 있는 컨테이너의 css선택자/html요소 |
| threshold | 최소 터치길이 정함 (px) |
| touchMoveStopPropagation | true면 “터치움직임”이 전파되는 것을 막음 |
| touchRatio | 터치 비율 |
| touchReleaseOnEdges | ture면 첫 번째나 마지막 슬라이드일 때 그 이상의 페이지 스크롤링을 허락 |
| touchStartForcePreventDefault | touchstart 이벤트의 디폴트를 항상 막는다. |
| touchStartPreventDefault | false면 touchstart 이벤트를 막지 못한다. |
| uniqueNavElements | true면 활성화(기본값)되고 탐색 요소의 매개 변수가 문자열(".pagination"과 같이)로 전달되는 경우 스와이퍼는 먼저 하위 요소를 통해 해당 요소를 찾는다. 페이지 지정, 이전/다음 단추 및 스크롤 막대 요소에 적용. |
| updateOnImagesReady | true하면 모든 내부 태그가 로드된 후 스와이퍼가 다시 초기화된다. preloadImages: true로 설정되어 있어야 한다. |
| updateOnWindowResize | resize될 때 스와이퍼가 슬라이드 위치를 다시 계산함. |
| url | 서버측과 기록에서 렌더링 할 때 현재슬라이드를 찾는데 필요. |
| userAgent | 서버측에서 렌더링 할 때 브라우저나 디바이스 장치 찾는데 필요. |
| virtualTranslate | 움직이지 않을 것이고 wrapper의 translate값이 설정되지 않을 것임.slide transition을 커스텀할 때 유용. |
| watchOverflow | true면 슬라이딩하기에 슬라이드가 부족할 경우 스와이핑 안되고 네비게이션 버튼도 숨겨진다. |
| watchSlidesProgress | 각 슬라이드의 진행과 visibility를 계산함 |
| width | 스와이퍼 너비를 지정함. |
| wrapperClass | swiper-wrapper |
| onAny | 모든 이벤트를 활성화시킬 이벤트 리스너. |
Methods & Properties
| properties | 내용 |
|---|---|
| swiper.$el | 컨테이너 HTML 요소가 있는 Dom7 요소. 바닐라 HTML 요소를 얻으려면 swiper.el 사용. |
| swiper.$wrapperE1 | 래퍼 HTML 요소가 있는 Dom7 요소. 바닐라 HTML Element를 얻으려면 스와이퍼를 사용. |
| swiper.activeIndex | 현재 슬라이드의 인덱스 |
| swiper.allowSlidesNext | 다음슬라이드로 넘거가는 기능 사용함/안함 |
| swiper.allowSlidePrev | 이전슬라이드로 넘거가는 기능 사용함/안함 |
| swiper.allowTouchMove | 마우스나 터치로 잡고있는거 사용/불가능 |
| swiper.animating | 트랜지션되고있을 때 true |
| swiper.clickedIndex | 마지막 클릭한 슬라이드의 인덱스 |
| swiper.clickedSlide | 마지막 클릭한 슬라이드의 링크로 |
| swiper.el | 컨테이너 요소 |
| swiper.height | 컨테이너 height |
| swiper.isBeginning | 슬라이드가 가장 왼쪽이나 위로 갔을 때 true |
| swiper.isEnd | 슬라이드가 가장 우측이나 아래로 갔을 때 true |
| swiper.originalParams | 시작하는 파라미터가 있는 오브젝트 |
| swiper.params | 시작하는 파라미터 중 지나간 것들을 갖고있는 오브젝트 |
| swiper.previousIndex | 최신 active slide의 인덱스 |
| swiper.progress | 현재 진행되는 wrapper의 translate |
| swiper.realIndex | loop mode에서 복사된 슬라이드를 고려하여 현재의 활성 슬라이드의 인덱스 |
| swiper.slides | 슬라이드 HTML 요소의 Dom7 배열과 같은 컬렉션. |
| swiper.touches | 터치 이벤트 properties가 담긴 오브젝트 |
| swiper.translate | wrapper translate의 현재 값 |
| swiper.width | 컨테이너 width |
| swiper.wrapperE1 | wrapper html 요소 |
| swiper.defaults | 디폴트 옵션 |
| swiper.extendedDefaults | 전역스와이퍼의 확장된옵션을 가진 오브젝트 |
| Methods | 내용 |
|---|---|
| swiper.attachEvents() | 모든 이벤트 리스너를 다시 붙임 |
| swiper.changeDirection(direction, needUpdate) | 슬라이드 방향을 수평->수직->수평 바꿈 |
| swiper.destroy(deleteInstance, cleanStyles) | 모든 이벤트 리스너를 없애고 슬라이드 인스탄스를 제거함 |
| swiper.detachEvents() | 모든 이벤트 리스너를 없앰 |
| swiper.disable() | 스와이퍼 비활성화시킴. 모든 네이게이션 숨기고, 어떤 이벤트에도 동작하지 않음 |
| swiper.emit(event, args) | 인스탄스에 이벤트 발생 |
| swiper.enable() | 스와이퍼 동작, |
| swiper.getTranslate() | 현재 translate 값 얻음 |
| swiper.init(el) | 슬라이더 초기화 |
| swiper.loopCreate() | 내부? |
| swiper.loopDestroy() | 내부? |
| swiper.off(event, handler) | 이벤트 핸들러 지움 |
| swiper.offAny(handler) | 모든 이벤트에서 발생할 이벤트 리스너를 지움 |
| swiper.on(event, handler) | 이벤트 핸들러 추가 |
| swiper.onAny(handler) | 모든 이벤트에서 발생할 이벤트 리스너를 추가 |
| swiper.once(event, handler) | 이벤트 리스너를 추가하고. 그 이벤트리스너는 실행 후 지워질 것임 |
| swiper.setGrabCursor() | grab cusor를 설정 |
| swiper.setTranslate(translate) | wrapper의 trsanslate값을 커스텀 |
| swiper.slideNext(speed, runCallbacks) | 다음 슬라이드로 넘어갈때 |
| swiper.slidePrev(speed, runCallbacks) | 이전 슬라이드로 넘어갈때 |
| swiper.slideReset(speed, runCallbacks) | speed 매개변수와 같은 시간동안 현재 슬라이드로 리셋해줌 |
| swiper.slideTo(index, speed, runCallbacks) | speed 매개변수와 같은 시간동안 index매개변수와 인덱스가 같은 슬라이드로 이동 |
| swiper.slideToClosest(speed, runCallbacks) | speed 매개변수와 같은 시간동안 가장 가까운 슬라이드로 이동 및 리셋 |
| swiper.slideToLoop(index, speed, runCallbacks) | slideTo와 동일하다. loop모드일 때 지난 슬라이드의 인덱스와 매칭해준다. |
| swiper.translateTo(translate, speed, runCallbacks, translateBounds) | 설정한 translate 값에 맞게 이동 |
| swiper.unsetGrabCursor() | grab cursor 언셋 |
| swiper.update() | 슬라이드를 수동으로 추가/제거하거나 숨기기/표시하거나 Swiper를 사용하여 사용자 지정 DOM을 수정한 후 호출해야함 |
| swiper.updateAutoHeight(speed) | speed 파라미터와 동일한 시간동안 height(autoHeight가 ture일 때) height를 업뎃함 |
| swiper.updateProgress() | 진행률을 다시 계산 |
| swiper.updateSize() | 진행률을 다시 계산 |
| swiper.updateSize() | 컨테이너의 사이즈를 다시 계산 |
| swiper.updateSlides() | 슬라이드 수와 오프셋을 계산함. 자바스크립트로 슬라이드를 추가하거나 지웠을 경우 유용함 |
| swiper.updateSlidesClasses() | 슬라이드나 페이지네이션 불릿의 클래스를 업뎃. |
| swiper.extendDefaults(options) | 전역 스와이퍼 기본값 확장 |
| swiper.use(modules) | 런타임에 swiper에 모듈을 설치합니다. |
Events
| events | 내용 |
|---|---|
| activeIndexChange | 래퍼 HTML 요소가 있는 Dom7 요소. 바닐라 HTML Element를 얻으려면 스와이퍼를 사용. |
| afterInit | 현재 슬라이드의 인덱스 |
| beforeDestroy | 다음슬라이드로 넘거가는 기능 사용함/안함 |
| beforeInit | 이전슬라이드로 넘거가는 기능 사용함/안함 |
| beforeLoopFix | 마우스나 터치로 잡고있는거 사용/불가능 |
| beforeResize | 트랜지션되고있을 때 true |
| beforeSlideChangeStart | 마지막 클릭한 슬라이드의 인덱스 |
| beforeTransitionStart | 마지막 클릭한 슬라이드의 링크로 |
| breakpoint | 컨테이너 요소 |
| changeDirection | 컨테이너 height |
| click | 슬라이드가 가장 왼쪽이나 위로 갔을 때 true |
| destroy | 슬라이드가 가장 우측이나 아래로 갔을 때 true |
| doubleClick | 시작하는 파라미터가 있는 오브젝트 |
| doubleTap | 시작하는 파라미터 중 지나간 것들을 갖고있는 오브젝트 |
| fromEdge | 최신 active slide의 인덱스 |
| imagesReady | 현재 진행되는 wrapper의 translate |
| init | loop mode에서 복사된 슬라이드를 고려하여 현재의 활성 슬라이드의 인덱스 |
| lock | 슬라이드 HTML 요소의 Dom7 배열과 같은 컬렉션. |
| loopFix | 터치 이벤트 properties가 담긴 오브젝트 |
| momentumBounce | wrapper translate의 현재 값 |
| observerUpdate | 컨테이너 width |
| orientationchange | wrapper html 요소 |
| progress | 디폴트 옵션 |
| reachBeginning | 전역스와이퍼의 확장된옵션을 가진 오브젝트 |
| reachEnd | 마지막 슬라이드 갔을 때 이벤트 |
| realIndexChange | 인덱스가 바뀔 때 이벤트 |
| resize | 리사이즈 조절이 이루어지기 직전에 윈도우가 리사이즈될 때 이벤트 |
| setTransition | 애니메이션이 히작될 때 이벤트. 인자로 transition duration(ms)로 받는다. |
| setTranslate | wrapper가 position이 변할 때 이벤트 |
| slideChange | 슬라이드가 교체될 때 이벤트 |
| slideChangeTransitionEnd | 다른 슬라이드로 이동할 때 이벤트 |
| slideChangeTransitionStart | 다른 슬라이드로 이동하기 시작할 때 이벤트 |
| slideNextTransitionEnd | slideChangeTransitionEnd와 같지만 방향이 앞임 |
| slideNextTransitionStart | slideChangeTransitionStart와 같지만 방향이 앞임 |
| slidePrevTransitionEnd | slideChangeTransitionEnd와 같지만 방향이 뒤임 |
| slidePrevTransitionStart | slideChangeTransitionStart와 같지만 방향이 뒤임 |
| slideResetTransitionEnd | 리셋된 슬라이드에서 이동이 끝날 때 이벤트 |
| slideResetTransitionStart | 리셋된 슬라이드에서 이동이 시작할 때 이벤트 |
| sliderFirstMove | 첫 터치에 이벤트 |
| sliderMove | 터치 움직임 있으면 이벤트. touchmove 이벤트가 인자로 사용됨. |
| slidesGridLengthChange | 슬라이드 그리드가 바뀔 때 이벤트 |
| slidesLengthChange | 슬라이드 개수가 바뀔떄 이벤트 |
| snapGridLengthChange | 스냅 그리드가 바뀔 때 이벤트 |
| snapIndexChange | 스냅 인덱스가 바뀔 때 이벤트 |
| tab | 클릭이나 탭을 했을 때 이벤트. touchmove를 인자로 가짐 |
| toEdge | 처음이나 마지막 슬라이드로 이동시 이벤트 |
| touchEnd | 유저가 스와이퍼를 시작했을 때. touchend이벤트를 인자로 함. |
| touchMove | 터치나 손가락을 얹었을 때 이벤트. touchmove를 인자로 함. |
| touchMoveOpposite | 방향 파라미터와 반대방향으로 터치했을 때 이벤트. |
| touchStart | 유저가 스와이퍼를 터치했을 때 이벤트. |
| transitionEnd | 트랜지션이 끝나면 이벤트 |
| transitionStart | 트랜지션이 시작하면 이벤트 |
| unlock | 스와이퍼가 lock이 풀렸을떄 이벤트 |
| update | 스와이퍼 업데이트 |
qwe