스와이퍼 타입

스와이퍼 타입 사용 방법

components/swiper/swiper-type.ejs

  - 사용:
    < % - include(`${_src}/views/components/swiper/swiper-type.ejs`, {
      swiperType: 'card',
      desktop: 5
    }) % >

  - 옵션:
    - swiperType: 스와이퍼 타입 ('card', 'slim', 기본값: 'card')
      + 신규 타입은 src/assets/scripts/ui/swiper.js 에서 추가
    - desktop: 데스크톱에서 보여줄 슬라이드 수 (기본값: 5)

  - 설명:
    - data-swiper-type="card" : 카드형 스와이퍼 레이아웃 사용 (기본형)
    - data-swiper-type="slim" : slim형 스와이퍼 레이아웃 사용 (여백17.6px 간격)
    - data-desktop="5" : 데스크톱에서 보이는 슬라이드 수(정수) - 기본 5개로 보여짐
    - data-offset-before="0" : 시작 여백(px)
    - data-offset-after="0" : 끝 여백(px)
    - data-offset : 여백 주게되면 swiper-slide 여백만큼 잘림. (비선호)
    - 기본 구조: swiper-container > swiper-wrapper > swiper-slide + vits-swiper-navs(prev/next)

  - 기본 구조 예시:
    <div class="swiper-container vits-swiper js-swiper" data-swiper-type="card" data-desktop="5">
      <ul class="swiper-wrapper">
        <li class="swiper-slide">Slide 1</li>
        <li class="swiper-slide">Slide 2</li>
        <li class="swiper-slide">Slide 5</li>
      </ul>
    </div>
    <div class="vits-swiper-navs">
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
    </div>
            

다른 타입의 스와이프

1111
22
333333
24444442
1111
22
333333
24444442