project components guide

기본 가이드

설계 단계의 특별한 UX 요청이나 개발 환경에 따른 제약으로 개발 요청 사항이 없다면 테스트 완료된 코드를 복사 붙여 넣기를 기본으로 합니다.

협의 할 점

가이드를 작성 합니다.

접근성 가이드

가이드를 작성 합니다.

Swiper

컴포넌트 클래스 : .component-swiper
컴포넌트 자식 클래스 : .swiper-wrapper, .swiper-slide
옵션 :
data-props-initial-slide - 시작 슬라이드 설정,
data-props-navigation- navigation 설정,
data-props-pagination- pagination 설정,
data-props-autoplay- 자동 슬라이드 설정,
data-props-slides-per-view- 보여지는 슬라이드 갯수,
data-props-speed- 시간 설정,
data-props-space-between- 슬라이드 사이 여백


<div class="component-swiper" data-component="swiper" data-props-initial-slide="1" data-props-navigation="true" data-props-pagination="true" data-props-autoplay="true" data-props-slides-per-view="3" data-props-speed="700" data-props-space-between="20">
  <div class="swiper-wrapper">
    <div class="swiper-slide" style="height: 150px; background-color: lightblue;">
      <button><img src="" alt=""/>slide 1</button>
    </div>
    <div class="swiper-slide" style="height: 150px; background-color: lightcoral;">
      <button><img src="" alt="" />slide 2</button>
    </div>
    <div class="swiper-slide" style="height: 150px; background-color: lightgoldenrodyellow;">
      <button><img src="" alt="" />slide 3</button>
    </div>
    <div class="swiper-slide" style="height: 150px; background-color: lightgreen;">
      <button><img src="" alt="" />slide 4</button>
    </div>
    <div class="swiper-slide" style="height: 150px; background-color: lightgrey;">
      <button><img src="" alt="" />slide 5</button>
    </div>
  </div>
</div>

/* css 주석 사용시 이 주석사용 부탁드립니다. */