Carousel

DEMO

Swiper

기본 배포되는 번들 파일이 아닌 커스터마이징이 된 스와이퍼 번들입니다.

커스터마이징 내용:

커스텀 엘리먼트 CSS에 신세계V 디자인 적용
슬라이드 내 이미지 영역 중간 지점에 버튼 노출을 가능하게 하기 위해 --swiper-slide-size CSS 변수 추가

번들 경로: /ui/lib/swiper/swiper-element-customized-bundle.min.js

Astro

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

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

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

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

Props:

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

Slots:

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

1, 2, 3단

2025-03-18: 슬라이드와 인디케이터 사이에 노출되는 내용 추가. (peakaboo에서도 동일하게 사용 가능)

<script type="module">
  if (!window.customElements.get("swiper-container")) {
    import("/path/to/swiper-element-bundle");
  }
</script>

<!--
와이드 모드 클래스: v-carousel--wide
단수에 맞춰 `slides-per-view`와 `slides-per-group` 속성 적용
-->
<swiper-container
  space-between="8"
  slides-per-view="2"
  slides-per-group="2"
  navigation="true"
  pagination="true"
  class="v-carousel v-carousel--wide"
>
  <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

1단

상품 1

상품 2

상품 3

상품 4

상품 5

1단 (Wide)

상품 1

상품 2

상품 3

상품 4

상품 5

Peakaboo

2025-04-14: 피카부 비율 수정

단수	비율
`1.5`	1.3725
`2.5`	2.7551
`3.5`	3.6
`4.5`	4.8
`5.5`	5.55

<script type="module">
  if (!window.customElements.get("swiper-container")) {
    import("/path/to/swiper-element-bundle");
  }
</script>

<!-- 단수에 맞춰 `slides-per-view` 적용 -->
<swiper-container
  slides-offset-before="24"
  slides-offset-after="24"
  space-between="8"
  slides-per-view="2.7551"
  free-mode="true"
  sticky="true"
  class="v-carousel"
>
  <swiper-slide>…</swiper-slide>
  <swiper-slide>…</swiper-slide>
  …
</swiper-container>

상품 1

상품 2

상품 3

상품 4

상품 5

캐러셀 밖의 텍스트 일 경우, 검은색 버튼을 사용합니다
캐러셀 안의 텍스트 일 경우, 흰색 버튼을 사용합니다

흰색의 경우 기본 .v-carousel에 .v-carousel_button_white가 추가하여 사용합니다.

<swiper-container
  ...
  navigation="true"
  class="v-carousel v-carousel_button_white"
>
  <swiper-slide>…</swiper-slide>
  <swiper-slide>…</swiper-slide>
  <!-- … -->
</swiper-container>

두가지 경우를 확인할 수 있는 배너 샘플 페이지를 참고해주세요.

Carousel

Swiper

1, 2, 3단

Peakaboo

Navigation Color