Skip to content
SHINSEGAE V UI

Carousel

Shared/module/Carousel과는 아래 여백 관련 속성들이 다릅니다.

  • space-between: 슬라이드 간 여백 24
  • slides-offset-before: 첫 슬라이드 앞 여백 40
  • slides-offset-after: 마지막 슬라이드 뒤 여백 40

그 외에는 모바일과 마찬가지로 경우에 맞춰 노출 슬라이드 수 조절해주시면 됩니다.

Astro
---
import Carousel from "@pc/module/carousel/Carousel.astro";


const slides = [
  /* … */
];
---


<Carousel offset={40} spaceBetween={24} slidesPerView={1}>
  {slides.map((slide) => <swiper-slide>{slide}</swiper-slide>)}


  <div slot="container-end">
    #shadow-root 내 `.swiper-wrapper`(슬라이드 영역) 뒤에 삽입
  </div>
</Carousel>

Props:

  • offset?:number: Peakaboo 사용 시 첫 슬라이드 앞, 끝 슬라이드 뒤 여백 (기본값: 40)
  • spaceBetween?:number: 슬라이드 간 여백 (기본값: 8)
  • slidesPerView?number: 한 번에 보여줄 슬라이드 수, 소수인 경우 peakaboo 모드 적용 (기본값: 1)
  • wide?:boolean: 전체 너비 사용하는 경우 사용 (기본값: false)
  • button?:"white": 버튼 색상. 현재는 white만 지원

Slots:

  • "container-end": 스와이퍼 쉐도우돔 내 wrapper(슬라이드 영역) 뒤에 삽입

배너

<!--
스타일 클래스 설명
- `v-carousel--wide`: 와이드 모드
- `v-carousel_button_white`: 흰색 버튼. Img+Text(안)인 경우 사용
-->
<swiper-container
  space-between="24"
  slides-per-view="1"
  slides-per-group="1"
  navigation="true"
  pagination="true"
  class="v-carousel v-carousel--wide v-carousel_button_white"
>
  <swiper-slide>…</swiper-slide>
  <swiper-slide>…</swiper-slide>
  <!-- … -->
</swiper-container>
배너 1
배너 2
배너 3
배너 1
배너 2
배너 3

3단, 4단

<swiper-container
  space-between="24"
  slides-per-view="3"
  slides-per-group="3"
  navigation="true"
  pagination="true"
  class="v-carousel"
>
  <swiper-slide>…</swiper-slide>
  <swiper-slide>…</swiper-slide>
  …
  <div slot="container-end">
    <div class="v-carousel_slot_end">
      <!-- 버튼 등 슬라이드 영역과 인디케이터 영역 사이에 노출되는 내용 -->
    </div>
  </div>
</swiper-container>
배너 1
배너 2
배너 3
배너 4
배너 5
배너 6
배너 1
배너 2
배너 3
배너 4
배너 5
배너 6

3.5, 5.5단 (Peakaboo)

<swiper-container
  slides-offset-before="40"
  slides-offset-after="40"
  space-between="24"
  slides-per-view="3.6"
  free-mode="true"
  sticky="true"
  class="v-carousel"
>
  <swiper-slide>…</swiper-slide>
  <swiper-slide>…</swiper-slide>
  …
</swiper-container>
상품 1
상품 2
상품 3
상품 4
상품 5
상품 6
상품 7
상품 8
상품 1
상품 2
상품 3
상품 4
상품 5
상품 6
상품 7
상품 8