splidejs 슬라이드 핵심 정리

• home : https://splidejs.com/
• option : https://splidejs.com/guides/options/#type

1. Getting Started

• CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css">
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js"></script>

 

- html

<div class="slide-intro">
  <div id="image-carousel" class="splide" aria-label="Beautiful Images">
    <div class="splide__track">
      <ul class="splide__list">
        <li class="splide__slide">
          <img src="https://images.unsplash.com/photo-1682685797769-481b48222adf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="">
        </li>
        <li class="splide__slide">
          <img src="https://images.unsplash.com/photo-1682685797208-c741d58c2eff?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="">
        </li>
        <li class="splide__slide">
          <img src="https://images.unsplash.com/photo-1682695794816-7b9da18ed470?ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="">
        </li>
        <li class="splide__slide">
          <img src="https://images.unsplash.com/photo-1682685797769-481b48222adf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="">
        </li>
        <li class="splide__slide">
          <img src="https://images.unsplash.com/photo-1682685797208-c741d58c2eff?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="">
        </li>
        <li class="splide__slide">
          <img src="https://images.unsplash.com/photo-1682695794816-7b9da18ed470?ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="">
        </li>
        <li class="splide__slide">
          <img src="https://images.unsplash.com/photo-1682685797769-481b48222adf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="">
        </li>
        <li class="splide__slide">
          <img src="https://images.unsplash.com/photo-1682685797208-c741d58c2eff?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="">
        </li>
        <li class="splide__slide">
          <img src="https://images.unsplash.com/photo-1682695794816-7b9da18ed470?ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="">
        </li>
      </ul>
    </div>
  </div>
</div>

 

- scss

.slide-intro {
  .splide {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
  }
  .splide__track {
    overflow: visible;
  }
  .splide__slide img {
    width: 100%;
    height: auto;
  }
}

- js

var splide = new Splide( '.splide', {
  type   : 'slide',
  // perPage: 2,
  padding: '5rem',
  gap: '10px',
  start: 1
} );

splide.mount();

 

Options

https://splidejs.com/guides/options/

• type
  캐러셀의 유형
• role
  role루트 요소로 설정
• label
  aria-label루트 요소로 설정
• labelledby
  aria-labelledby루트 요소로 설정
• rewind
  캐러셀을 되감을지 여부를 결정합니다.
• speed
  밀리초 단위의 전환 속도
• rewindSpeed
  되감기 시 전환 속도(밀리초)
• rewindByDrag
  드래그로 되감기 가능
• width
  10em, 80vw와 같은 CSS 형식을 허용하는 캐러셀 최대 너비를 정의합니다.
• height
  %를 제외한 CSS 형식을 허용하여 캐러셀 높이를 정의합니다.
• fixedWidth
  CSS 형식을 허용하여 슬라이드 너비를 수정합니다.
• fixedHeight
  %를 제외한 CSS 형식을 허용하여 슬라이드 높이를 수정했습니다.
• heightRatio
  캐러셀 너비에 대한 비율로 슬라이드 높이를 결정합니다.
• autoWidth
  이면 true슬라이드 너비는 너비에 따라 결정됩니다.
• autoHeight
  이면 true슬라이드의 높이가 높이에 따라 결정됩니다.
• start
  시작 인덱스
• perPage
  페이지에 표시할 슬라이드 수를 결정합니다.
• perMove
  한 번에 이동할 슬라이드 수를 결정합니다.
• clones
  캐러셀의 각 측면에 있는 클론 수를 명시적으로 결정합니다.
• cloneStatus
  is-active클래스를 클론에 추가할지 여부를 결정합니다.
• focus
  페이지에 여러 슬라이드가 있는 경우 어떤 슬라이드를 활성화할지 결정합니다.
• gap
  슬라이드 사이의 간격. CSS 형식이 허용됩니다.
• padding
  캐러셀의 왼쪽/오른쪽 또는 위쪽/아래쪽 패딩을 설정합니다. CSS 형식이 허용됩니다.
• arrows
  화살표 생성/찾기 여부를 결정합니다.
• pagination
  페이지네이션(표시점) 생성 여부를 결정합니다.
• paginationKeyboard
  포커스가 있을 때 페이지 매김에 대한 키보드 단축키를 활성화할지 여부를 결정합니다.
• paginationDirection
  페이지 매기기 방향을 명시적으로 설정합니다.
• easing
  CSS 전환을 위한 타이밍 기능
• easingFunc
  드래그 프리 모드의 이징 기능
• drag
  캐러셀 드래그를 허용할지 여부를 결정합니다.
• snap
  드래그 프리 모드에서 가장 가까운 슬라이드를 스냅합니다.
• noDrag
  드래그할 수 없는 노드의 선택기입니다.
• dragMinThreshold
  터치 동작으로 캐러셀을 움직이기 시작하는 데 필요한 거리
• flickPower
  "플릭"의 힘을 결정합니다. 숫자가 클수록 캐러셀이 더 멀리 실행됩니다.
• flickMaxPages
  플릭 동작으로 이동할 페이지 수를 제한합니다.
• waitForTransition
  캐러셀이 전환되는 동안 모든 작업을 비활성화할지 여부를 결정합니다.
• arrowPath
  다음과 같이 화살표 SVG 경로를 변경합니다.'m7.61 0.807-2.12...'
• autoplay
  자동 재생 활성화 여부를 결정합니다.
• interval
  자동 재생 간격(밀리초)
• pauseOnHover
  마우스 오버 시 자동 재생을 일시 중지할지 여부를 결정합니다.
• pauseOnFocus
  캐러셀에 포커스가 있는 요소가 포함되어 있을 때 자동재생을 일시중지할지 여부를 결정합니다.
• resetProgress
  다시 시작하도록 요청할 때 자동 재생 진행 상황을 재설정할지 여부를 결정합니다.
• lazyLoad
  지연 로딩 활성화
• preloadPages
  활성 슬라이드 주변의 페이지(슬라이드 아님)를 미리 로드해야 하는지 결정합니다.
• keyboard
  키보드 단축키를 활성화합니다
• wheel
  마우스 휠로 탐색을 활성화합니다.
• wheelMinThreshold
  관성 스크롤에 의해 생성된 작은 델타를 차단하는 임계값
• wheelSleep
  다음 휠 입력을 수락할 때까지의 절전 기간(밀리초)
• releaseWheel
  캐러셀이 첫 번째 또는 마지막 슬라이드에 도달할 때 휠 이벤트를 해제할지 여부를 결정합니다.
• direction
  회전목마의 방향
• cover
  이미지를 상위 요소의 srcCSS URL로 변환합니다.background-image
• slideFocus
  tabindex="0"보이는 슬라이드에 추가할지 여부를 결정합니다.
• focusableNodes
  슬라이드 내부의 포커스 가능한 노드에 대한 선택기입니다.
• isNavigation
  이면 true회전식 슬라이드를 통해 슬라이드를 클릭하여 다른 회전식 메뉴를 탐색할 수 있습니다.
• trimSpace
  focus옵션을 사용할 수 있는 경우 캐러셀 앞/뒤의 공간을 자를지 여부를 결정합니다.
• omitEnd
  캐러셀이 마지막 페이지에 도달하면 다음 화살표를 비활성화하고 중복된 페이지 매김 점을 생략합니다(^4.1.0).
• updateOnMove
  is-active캐러셀을 이동하기 직전에 슬라이드 상태를 업데이트합니다.
• mediaQuery
  이면 min중단점에 대한 미디어 쿼리는 이고 min-width, 그렇지 않으면max-width
• live
  라이브 지역을 활성화합니다
• breakpoints
  특정 중단점에 대한 응답 옵션 모음
• reducedMotion
  (prefers-reduced-motion: reduce)감지될 때 사용되는 옵션
• classes
  클래스 이름 컬렉션
• i18n
  i18n 문자열 모음
• destroy
  캐러셀을 파괴합니다.

https://codepen.io/odada/pen/qBLORRd