Carousel

Demo

Carousel

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

커스터마이징 내용:

커스텀 엘리먼트 CSS에 신세계V 디자인 적용
--swiper-slide-size CSS 변수 추가 (내비 버튼 상하 중앙정렬에 사용)
check-height 선택자에 해당하는 요소 중 가장 큰 높이를 --swiper-checked-height 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>)}
</Carousel>

Props:

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

Autoplay:

<!-- autoplay 속성만 적용 -->
<Carousel autoplay />

<!-- autoplay + autoplay-delay="5000" 적용 -->
<Carousel autoplay={5000} />
<Carousel autoplay={{ delay: 5000 }} />

<!-- autoplay + autoplay-delay="5000" + autoplay-speed="600" 적용 -->
<Carousel autoplay={{ delay: 5000, duration: 600 }} />

속도 조정

2025-03-18: SI-24231 메인 홈 배너 스와이프 속도 변경

MW => delay: 3000ms, speed: 500ms

PC => delay: 4000ms, speed: 500ms

<!-- autoplay + autoplay-delay="3000" + autoplay-speed="500" 적용 -->
<swiper-container
  ...
  autoplay
  autoplay-delay=3000
  autoplay-speed=500
>
  <swper-slide>...</swper-slide>
  ...
</swiper-container>

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>
  …
</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

Depricated

v-carousel_button_white 클래스 미사용 : 퍼블/운영에 style 없음. 삭제해도 화면에 변화없음
(CSS변수 --swiper-navigation-color로 사용중)