swiper 옵션 정리 parameters

swiper 옵션 정리 parameters

 

1. Parameters

 

Parameters 사용법

const swiper = new Swiper('.swiper', {
  // Default parameters
  slidesPerView: 1
  }
});

 

위에 코드에서 sliderPerview : 1

sliderPerview가 파라미터 Name이고 : 뒤에 1이 type을 쓰면 된다.

 

Name:  allowSlideNext

Type:  boolean

Dafault:  true

다음 슬라이드 방향(오른쪽 또는 아래쪽)으로 스와이프 하지 않으려면 false로 설정합니다

 

Name:  allowSlidePrev

Type:  boolean

Dafault:  true

이전 슬라이드 방향(왼쪽 또는 위쪽)으로 스와이프 하지 않으려면 false로 설정합니다.

 

Name:  allowTouchMove

Type:  boolean

Dafault:  true

false인 경우 슬라이드를 전환하는 유일한 방법은 slidePrev 또는 slideNext와 같은 외부 API 함수를 사용하는 것입니다.

 

Name:  autoHeight

Type:  boolean

Dafault:  false

true로 설정하면 슬라이더 래퍼가 현재 활성 슬라이드의 높이에 맞게 높이를 조정합니다.

 

Name:  breakpoints

Type:  object

true로 설정하면 슬라이더 래퍼가 현재 활성 슬라이드의 높이에 맞게 높이를 조정합니다.

const swiper = new Swiper('.swiper', {
  // Default parameters
  slidesPerView: 1,
  spaceBetween: 10,
  // Responsive breakpoints
  breakpoints: {
    // when window width is >= 320px
    320: {
      slidesPerView: 2,
      spaceBetween: 20
    },
    // when window width is >= 480px
    480: {
      slidesPerView: 3,
      spaceBetween: 30
    },
    // when window width is >= 640px
    640: {
      slidesPerView: 4,
      spaceBetween: 40
    }
  }
})
const swiper = new Swiper('.swiper', {
  slidesPerView: 1,
  spaceBetween: 10,
  // using "ratio" endpoints
  breakpoints: {
    '@0.75': {
      slidesPerView: 2,
      spaceBetween: 20,
    },
    '@1.00': {
      slidesPerView: 3,
      spaceBetween: 40,
    },
    '@1.50': {
      slidesPerView: 4,
      spaceBetween: 50,
    },
  }
});

 

Name:  centerInsufficientSlides

Type:  boolean

Dafault:  false

활성화되면 슬라이드의 양이 slidePerView보다 적은 경우 중앙 슬라이드입니다.

루프 모드 및 grid.rows를 사용하도록 의도되지 않았습니다.

 

Name:  centeredSlides

Type:  boolean

Dafault:  false

true인 경우 활성 슬라이드가 항상 왼쪽이 아니라 중앙에 배치됩니다.

 

Name:  centeredSlidesBounds

Type:  boolean

Dafault:  false

true인 경우 슬라이더의 시작과 끝에 간격을 추가하지 않고 활성 슬라이드가 중앙에 배치됩니다.

사용하려면 centeredSlides: true 가 설정되어있어야 합니다.

루프 또는 페이지 매김과 함께 사용하도록 의도되지 않음

 

Name:  centeredSlidesBounds

Type:  boolean

Dafault:  false

true인 경우 슬라이더의 시작과 끝에 간격을 추가하지 않고 활성 슬라이드가 중앙에 배치됩니다.

사용하려면 centeredSlides: true 가 설정되어있어야 합니다.

루프 또는 페이지 매김과 함께 사용하도록 의도되지 않음

 

Name:  containerModifierClass

Type:  string

Dafault:  'swiper-'

다양한 매개변수에 따라 swiper 컨테이너에 추가할 수 있는 modifier CSS 클래스의 시작

 

Name:  createElements

Type:  boolean

Dafault:  false

활성화되면 최신 CSS Scroll Snap API를 사용합니다. 

Swiper의 모든 기능을 지원하지는 않지만 잠재적으로 간단한 구성에서 훨씬 더 나은 성능을 제공해야 합니다.
활성화된 경우 지원되지 않는 항목은 다음과 같습니다.

큐브 및 카드 효과
속도 매개변수는 영향을 미치지 않을 수 있습니다.
모든 전환 시작/종료 관련 이벤트(대신 슬라이드 변경 사용)
SlidesPerGroup은 지원이 제한적입니다.
SimulationTouch는 효과가 없고 마우스로 "끌기"가 작동하지 않습니다.
저항은 아무런 효과가 없습니다
허용 슬라이드 이전/다음
스와이프 핸들러
freeMode 및 모든 관련 기능

 

Name:  direction

Type:  'horizontal' | 'vertical'

Dafault:  'horizontal'

활성화되면 최신 CSS Scroll Snap API를 사용합니다. 

 

Name:  edgeSwipeThreshold

Type:  number

Dafault:  20

앱에서 뒤로 스와이프 하기 위한 터치 이벤트를 해제하기 위한 화면 왼쪽 가장자리의 영역(px)

 

Name:  effect

Type:  'slide' | 'fade' | 'cube' | 'coverflow' | 'flip' | 'creative' | 'cards' 

Dafault:  'slide'

전환 효과. '슬라이드', '페이드', '큐브', '커버플로', '뒤집기' 또는 '창의적'일 수 있습니다.

 

Name:  enabled

Type:  boolean

Dafault:  true

Swiper가 처음에 활성화되었는지 여부.

Swiper가 비활성화되면 모든 탐색 요소가 숨겨지고 이벤트 및 상호 작용에 응답하지 않습니다.

 

Name:  focusableElements

Type:  string

Dafault:  'input, select, option, textarea, button, video, label'

포커스 가능한 요소에 대한 CSS 선택기. 이러한 요소가 "포커스"되어 있는 경우 스와이프가 비활성화됩니다.

 

Name:  followFinger

Type:  boolean

Dafault:  true

비활성화된 경우 슬라이더는 놓을 때만 애니메이션이 적용되며 손가락을 잡고 있는 동안에는 움직이지 않습니다.

 

Name:  grabCursor

Type:  boolean

Dafault:  true

이 옵션은 데스크톱 사용성을 약간 향상할 수 있습니다. true인 경우 Swiper에 마우스를 올려놓으면 사용자에게 "잡기" 커서가 표시됩니다.

 

Name:  height

Type:  null | number

Dafault:  null

매개변수는 Swiper 높이를 강제할 수 있습니다.
Swiper가 숨겨져 있고 올바른 Swiper 초기화를 위한 SSR 및 테스트 환경에서 초기화하는 경우에만 유용합니다.
이 매개변수를 설정하면 Swiper가 응답하지 않습니다.

 

Name:  init

Type:  boolean

Dafault:  true

인스턴스를 생성할 때 Swiper를 자동으로 초기화할지 여부입니다. 비활성화된 경우 swiper.init()를 호출하여 수동으로 초기화해야 합니다.

 

Name:  initialSlide

Type:  number

Dafault:  0

초기 슬라이드의 색인 번호입니다.

 

Name:  longSwipes

Type:  boolean

Dafault:  true

긴 스와이프를 비활성화하려면 false로 설정하십시오.

 

Name:  longSwipesMs

Type:  number

Dafault:  300

길게 스와이프 하는 동안 다음/이전 슬라이드로 스와이프를 트리거하는 최소 기간(ms)

 

Name:  longSwipesRatio

Type:  number

Dafault:  0.5

길게 스와이프하는 동안 다음/이전 슬라이드로 스와이프를 트리거하는 비율

 

Name:  loop

Type:  boolean

Dafault:  false

연속 루프 모드를 활성화하려면 true로 설정하십시오

루프 모드 작동 방식의 특성상 중복된 슬라이드가 추가됩니다. 이러한 복제된 슬라이드에는 추가 클래스가 있습니다.

swiper-slide-duplicate - represents duplicated slide
swiper-slide-duplicate-active - represents slide duplicated to the currently active slide
swiper-slide-duplicate-next - represents slide duplicated to the slide next to active
swiper-slide-duplicate-prev - represents slide duplicated to the slide previous to active

SlidesPerView: 'auto'와 함께 사용하는 경우 루프(복제)할 슬라이드의 양과 함께 loopedSlides 매개변수를 지정해야 합니다. 되감기 모드와 함께 사용하면 안 됩니다.

 

Name:  loopAdditionalSlides

Type:  number

Dafault:  0

루프 생성 후 복제될 슬라이드 추가 수

 

Name:  loopFillGroupWithBlank

Type:  boolean

Dafault:  false

활성화 및 루프 모드는 빈 슬라이드로 슬라이드 수가 부족한 그룹을 채웁니다.
SlidesPerGroup 매개변수와 함께 사용하는 것이 좋습니다.

 

Name:  loopPreventsSlide

Type:  boolean

Dafault:  true

활성화되면 전환이 이미 진행 중일 때 Swiper 슬라이드 이전/다음 전환을 방지합니다(루프가 활성화된 경우 효과가 있음).

 

Name:  loopedSlides

Type:  null | number

Dafault:  null

루프 모드와 함께 slidesPerView:'auto'를 사용하는 경우 이 매개변수를 사용하여 얼마나 많은 슬라이드를 루프(복제) 해야 하는지 Swiper에 알려야 합니다.

 

Name:  loopedSlidesLimit

Type:  boolean

Dafault:  true

활성화되면 복제된 슬라이드의 양이 원본 슬라이드의 양을 초과하지 않습니다.
보기당 슬라이드가 많고 원본 슬라이드의 양이 충분하지 않은 경우 loopedSlides를 비활성화하고 늘리는 데 유용합니다.

 

Name:  maxBackfaceHiddenSlides

Type:  number

Dafault:  10

총 슬라이드 수가 여기에 지정된 값보다 적은 경우 
Swiper는 뒷면 가시성: Safari에서 시각적 "깜박임"을 줄이기 위해 슬라이드 요소에 숨김을 활성화합니다.

성능을 저하시키므로 많은 양의 슬라이드에서 활성화하지 않는 것이 좋습니다.

 

Name:  modules

Type: SwiperModule []

스위퍼 모듈이 있는 어레이

아래 코드 참조.

import Swiper, { Navigation, Pagination } from 'swiper';

const swiper = new Swiper('.swiper', {
   modules: [ Navigation, Pagination ],
 });

 

Name:  nested

Type:  boolean

Dafault:  false

올바른 터치 이벤트 차단을 위해 Swiper에서 true로 설정합니다.
부모와 같은 방향을 사용하는 스와이퍼에만 사용

 

Name:  noSwiping

Type:  boolean

Dafault:  true

noSwipingClass에 지정된 클래스와 일치하는 요소에서 스와이프를 활성화/비활성화합니다.

 

Name:  noSwipingClass

Type:  string

Dafault:  'swiper-no-swiping'

noSwiping의 요소 CSS 클래스 지정

 

Name:  noSwipingSelector

Type:  string

noSwipingClass 대신 스와이프를 비활성화할 요소를 지정하는 데 사용할 수 있습니다.
예를 들어 'input'은 모든 입력에서 스와이프를 비활성화합니다.

 

Name:  normalizeSlideIndex

Type:  boolean

Dafault:  true

슬라이드 인덱스를 정규화합니다.

 

Name:  observeParents

Type:  boolean

Dafault:  false

Swiper 상위 요소에 대한 돌연변이도 시청해야 하는 경우 true로 설정하십시오.

 

Name:  observeSlideChildren

Type:  boolean

Dafault:  false

Swiper 슬라이드 하위 요소에 대한 돌연변이도 시청해야 하는 경우 true로 설정합니다.

 

Name:  observer

Type:  boolean

Dafault:  false

Swiper 및 해당 요소에서 Mutation Observer를 활성화하려면 true로 설정하십시오.
이 경우 Swiper는 스타일을 변경(예: 숨기기/표시)하거나
하위 요소를 수정(예: 슬라이드 추가/제거)할 때마다 업데이트(재초 기화)됩니다.

 

Name:  on

Type:  object

이벤트 핸들러 등록

 

Name:  passiveListeners

Type:  boolean

Dafault:  true

모바일 장치에서 스크롤 성능을 향상하기 위해 가능한 경우 수동 이벤트 리스너가 기본적으로 사용됩니다.
그러나 e.preventDefault를 사용해야 하고 충돌이 있는 경우 이 매개변수를 비활성화해야 합니다.

 

Name:  preloadImages

Type:  boolean

Dafault:  true

활성화되면 Swiper는 모든 이미지를 강제로 로드합니다.

 

Name:  preventClicks

Type:  boolean

Dafault:  true

스와이프 하는 동안 링크에 대한 우발적인 원치 않는 클릭을 방지하려면 true로 설정하십시오.

 

Name:  preventClicksPropagation

Type:  boolean

Dafault:  true

스와이프 하는 동안 링크에서 클릭 이벤트 전파를 중지하려면 true로 설정합니다.

 

Name:  preventInteractionOnTransition

Type:  boolean

Dafault:  false

활성화하면 전환 중에 스와이프 또는 탐색/페이지 매김 버튼으로 슬라이드를 변경할 수 없습니다.

 

Name:  resistance

Type:  boolean

Dafault:  true

스와이프 터치에 대한 저항 범위를 비활성화하려면 false로 설정하십시오.

 

Name:  resistanceRatio

Type:  number

Dafault:  0.85

이 옵션을 사용하면 스와이프 터치에 대한 저항 비율을 제어할 수 있습니다.

 

Name:  resizeObserver

Type:  boolean

Dafault:  true

활성화되면 swiper 컨테이너에서 ResizeObserver(브라우저에서 지원되는 경우)를 사용하여
컨테이너 크기 조정을 감지합니다(창 크기 조정을 감시하는 대신).

 

Name:  rewind

Type:  boolean

Dafault:  false

"되감기" 모드를 활성화하려면 true로 설정하십시오.
활성화된 경우 마지막 슬라이드에서 "다음" 탐색 버튼을 클릭하거나
. slideNext()를 호출하면 첫 번째 슬라이드로 다시 슬라이드 됩니다.
첫 번째 슬라이드에서 "이전" 탐색 버튼을 클릭하거나
. slidePrev()를 호출하면 마지막 슬라이드로 이동합니다.

루프 모드와 함께 사용하면 안 됩니다.

 

Name:  roundLengths

Type:  boolean

Dafault:  false

일반적인 해상도 화면에서 텍스트가 흐릿해지는 것을 방지하기 위해 슬라이드 너비와 높이 값을 반올림하려면 true로 설정합니다(있는 경우).

 

Name:  runCallbacksOnInit

Type:  boolean

Dafault:  true

스와이퍼 초기화 시 전환/슬라이드 변경/시작/종료 이벤트가 발생합니다.
이러한 이벤트는 initialSlide가 0이 아니거나 루프 모드를 사용하는 경우 초기화 시 발생합니다.

 

Name:  setWrapperSize

Type:  boolean

Dafault:  false

이 옵션을 활성화하면 플러그인이 모든 슬라이드의 전체 크기와 동일한 스위퍼 래퍼의 너비/높이를 설정합니다.
대부분 flexbox 레이아웃을 잘 지원하지 않는 브라우저의 호환성 폴백 옵션으로 사용해야 합니다.

 

Name:  shortSwipes

Type:  boolean

Dafault:  true

짧은 스와이프를 비활성화하려면 false로 설정하십시오.

 

Name:  simulateTouch

Type:  boolean

Dafault:  true

true인 경우 Swiper는 터치 이벤트와 같은 마우스 이벤트를 허용합니다(슬라이드를 변경하려면 클릭하고 드래그).

 

Name:  slideActiveClass

Type:  string

Dafault:  'swiper-slide-active'

현재 활성 슬라이드의 CSS 클래스 이름
클래스를 변경하면 변경된 클래스를 반영하도록 Swiper의 CSS도 변경해야 합니다.
Swiper Angular/React/Svelte/Vue 구성 요소에서는 지원되지 않습니다.

 

Name:  slideBlankClass

Type:  string

Dafault:  'swiper-slide-invisible-blank'

loopFillGroupWithBlank도 활성화된 경우 빈 슬라이드의 CSS 클래스 이름이 루프 모드에서 채우기 그룹에 추가됨
클래스를 변경하면 변경된 클래스를 반영하도록 Swiper의 CSS도 변경해야 합니다.
Swiper Angular/React/Svelte/Vue에서는 지원되지 않습니다.

 

Name:  slideClass

Type:  string

Dafault:  'swiper-slide'

슬라이드의 CSS 클래스 이름
클래스를 변경하면 변경된 클래스를 반영하도록 Swiper의 CSS도 변경해야 합니다.
Swiper Angular/React/Svelte/Vue에서는 지원되지 않습니다.

 

Name:  slideDuplicateActiveClass

Type:  string

Dafault:  'swiper-slide-duplicate-active'

현재 활성 슬라이드를 나타내는 복제된 슬라이드의 CSS 클래스 이름
클래스를 변경하면 변경된 클래스를 반영하도록 Swiper의 CSS도 변경해야 합니다.
Swiper Angular/React/Svelte/Vue에서는 지원되지 않습니다.

 

Name:  slideDuplicateClass

Type:  string

Dafault:  'swiper-slide-duplicate'

루프 모드로 복제된 슬라이드의 CSS 클래스 이름
클래스를 변경하면 변경된 클래스를 반영하도록 Swiper의 CSS도 변경해야 합니다.
Swiper Angular/React/Svelte/Vue에서는 지원되지 않습니다.

 

Name:  slideDuplicateNextClass

Type:  string

Dafault:  'swiper-slide-duplicate-next'

활성 슬라이드 옆의 슬라이드를 나타내는 복제된 슬라이드의 CSS 클래스 이름
클래스를 변경하면 변경된 클래스를 반영하도록 Swiper의 CSS도 변경해야 합니다.
Swiper Angular/React/Svelte/Vue에서는 지원되지 않습니다.

 

Name:  slideDuplicatePrevClass

Type:  string

Dafault:  'swiper-slide-duplicate-prev'

활성 슬라이드 이전 슬라이드를 나타내는 복제된 슬라이드의 CSS 클래스 이름
클래스를 변경하면 변경된 클래스를 반영하도록 Swiper의 CSS도 변경해야 합니다.
Swiper Angular/React/Svelte/Vue에서는 지원되지 않습니다.

 

Name:  slideNextClass

Type:  string

Dafault:  'swiper-slide-next'

현재 활성화된 슬라이드 바로 뒤에 있는 슬라이드의 CSS 클래스 이름
클래스를 변경하면 변경된 클래스를 반영하도록 Swiper의 CSS도 변경해야 합니다.
Swiper Angular/React/Svelte/Vue에서는 지원되지 않습니다.

 

Name:  slidePrevClass

Type:  string

Dafault:  'swiper-slide-prev'

현재 활성화된 슬라이드 바로 앞에 있는 슬라이드의 CSS 클래스 이름
클래스를 변경하면 변경된 클래스를 반영하도록 Swiper의 CSS도 변경해야 합니다.
Swiper Angular/React/Svelte/Vue에서는 지원되지 않습니다.

 

Name:  slideToClickedSlide

Type:  boolean

Dafault:  false

true로 설정하고 슬라이드를 클릭하면 이 슬라이드로 전환됩니다.

 

Name:  slideVisibleClass

Type:  string

Dafault:  'swiper-slide-visible'

현재 보이는 슬라이드의 CSS 클래스 이름
클래스를 변경하면 변경된 클래스를 반영하도록 Swiper의 CSS도 변경해야 합니다.
Swiper Angular/React/Svelte/Vue에서는 지원되지 않습니다.

 

Name:  slidesOffsetAfter

Type:  number

Dafault:  0

컨테이너 끝에 추가 슬라이드 오프셋(픽셀 단위)을 추가합니다(모든 슬라이드 후).

 

Name:  slidesOffsetBefore

Type:  number

Dafault:  0

컨테이너 시작 부분(모든 슬라이드 앞에)에 추가 슬라이드 오프셋(px)을 추가합니다.

 

Name:  slidesPerGroup

Type:  number

Dafault:  1

그룹 슬라이딩을 정의하고 활성화할 슬라이드 수를 설정합니다. SlidesPerView > 1과 함께 사용하는 데 유용합니다.

 

Name:  slidesPerGroupAuto

Type:  boolean

Dafault:  false

이 매개변수는 slidesPerView: 'auto' 및 slidesPerGroup: 1에만 사용하도록 의도되었습니다.
1. 활성화되면. slideNext() 및. slidePrev() 메서드 호출, 탐색 "버튼" 클릭 및 자동 재생 시 보기에 있는 모든 슬라이드를 건너뜁니다.

 

Name:  slidesPerGroupSkip

Type:  number

Dafault:  0

매개변수는 다음과 같은 방식으로 작동합니다.
slidesPerGroupSkip이 0(기본값)이면 그룹화에서 슬라이드가 제외되지 않으며 결과 동작은 이 변경 사항이 없는 경우와 동일합니다.
SlidesPerGroupSkip이 1보다 크거나 같으면 첫 번째 X개 슬라이드는 단일 그룹으로 처리되는 반면 모든 다음 슬라이드는 slidesPerGroup 값으로 그룹화됩니다.

 

Name:  slidesPerView

Type:  number | 'auto'

Dafault:  1

매개변수는 다음과 같은 방식으로 작동합니다.
slidesPerGroupSkip이 0(기본값)이면 그룹화에서 슬라이드가 제외되지 않으며 결과 동작은 이 변경 사항이 없는 경우와 동일합니다.
SlidesPerGroupSkip이 1보다 크거나 같으면 첫 번째 X개 슬라이드는 단일 그룹으로 처리되는 반면 모든 다음 슬라이드는 slidesPerGroup 값으로 그룹화됩니다.

 

Name:  spaceBetween

Type:  number

Dafault:  0

슬라이드 사이의 거리(px).
"spaceBetween"을 전달하는 Swiper에 들어가는 요소에 "margin" CSS 속성을 사용하면 탐색이 제대로 작동하지 않을 수 있습니다.

 

Name:  speed

Type:  number

Dafault:  300

슬라이드 간 전환 기간(ms)

 

Name:  swipeHandler

Type:  null | CSSSelector | HTMLElement

Dafault:  null

CSS 선택기가 있는 문자열 또는 스와이프에만 사용 가능한 처리기로 작동하는 페이지 매김이 있는 컨테이너의 HTML 요소

 

Name:  threshold

Type:  number

Dafault:  0

임계값(px). "터치 거리"가 이 값보다 낮으면 스위퍼가 움직이지 않습니다.

 

Name:  touchAngle

Type:  number

Dafault:  45

터치 이동을 트리거하는 허용 각도

 

Name:  touchAngle

Type:  number

Dafault:  45

터치 이동을 트리거하는 허용 각도(도)

 

Name:  touchEventsTarget

Type:  'container' | 'wrapper' 

Dafault:  'wrapper'

터치 이벤트를 수신할 대상 요소입니다.
'컨테이너'(swiper의 터치 이벤트 수신) 또는 'wrapper'(swiper-wrapper의 터치 이벤트 수신) 일 수 있습니다.

 

Name:  touchMoveStopPropagation

Type:  boolean

Dafault:  false

활성화되면 "touchmove"의 전파가 중지됩니다.

 

Name:  touchRatio

Type:  number

Dafault:  1

터치 비율

 

Name:  touchReleaseOnEdges

Type:  boolean

Dafault:  false

추가 페이지 스크롤을 허용하기 위해 슬라이더 가장자리 위치(시작, 끝)에서 터치 이벤트를 해제하도록 활성화

 

Name:  touchStartForcePreventDefault

Type:  boolean

Dafault:  false

터치 시작(포인터다운) 이벤트에 대한 기본값을 항상 방지하도록 강제 설정

 

Name:  touchStartPreventDefault

Type:  boolean

Dafault:  true

비활성화하면 터치 시작(포인터다운) 이벤트가 방지되지 않습니다.

 

Name:  uniqueNavElements

Type:  boolean

Dafault:  true

기본적으로 활성화되어 있고 탐색 요소의 매개변수가 문자열(예: ". pagination")로 전달되면 Swiper는 먼저 하위 요소를 통해 이러한 요소를 찾습니다.
페이지 매김, 이전/다음 버튼 및 스크롤바 요소에 적용

 

Name:  updateOnImagesReady

Type:  boolean

Dafault:  true

활성화되면 모든 내부 이미지( 태그)가 로드된 후 Swiper가 다시 초기화됩니다. 필수 preloadImages: true

 

Name:  updateOnWindowResize

Type:  boolean

Dafault:  true

Swiper는 창 크기 조정(방향 변경) 시 슬라이드 위치를 다시 계산합니다.

 

Name:  url

Type:  null | string 

Dafault:  null

서버 측에서 렌더링 되고 기록이 활성화된 경우 활성 슬라이드 감지에 필요합니다.

 

Name:  userAgent

Type:  null | string 

Dafault:  null

사용자 에이전트 문자열. 서버 측에서 렌더링 할 때 브라우저/장치 감지에 필요

 

Name:  virtualTranslate

Type:  boolean

Dafault:  false

이 옵션을 활성화하면 스위퍼가 움직이지 않고 래퍼의 실제 번역 값이 설정되지 않는다는 점을 제외하고 평소와 같이 작동합니다.
사용자 지정 슬라이드 전환을 생성해야 할 때 유용합니다.

 

Name:  watchOverflow

Type:  boolean

Dafault:  true

활성화되면 Swiper는 비활성화되고 슬라이딩을 위한 충분한 슬라이드가 없는 경우 탐색 버튼을 숨깁니다.

 

Name:  watchSlidesProgress

Type:  boolean

Dafault:  false

이 기능을 활성화하여 각 슬라이드 진행률 및 가시성을 계산합니다(뷰포트의 슬라이드에는 추가로 표시되는 클래스가 있음).

 

Name:  width

Type:  null | number 

Dafault:  null

스와이퍼 너비(px). 매개변수는 Swiper 너비를 강제로 허용합니다.
Swiper가 숨겨져 있고 올바른 Swiper 초기화를 위한 SSR 및 테스트 환경에서 초기화하는 경우에만 유용합니다.

 

Name:  wrapperClass

Type:  string

Dafault:  'swiper-wrapper'

슬라이드 래퍼의 CSS 클래스 이름
클래스를 변경하면 변경된 클래스를 반영하도록 Swiper의 CSS도 변경해야 합니다.
Swiper Angular/React/Svelte/Vue에서는 지원되지 않습니다.

 

Name:  onAny

Type:  function

모든 이벤트에서 실행될 이벤트 리스너 추가

아래 예시 코드

const swiper = new Swiper('.swiper', {
   onAny(eventName, ...args) {
     console.log('Event: ', eventName);
     console.log('Event data: ', args);
   }
 });