Skip to content
SHINSEGAE V UI

Img(퀵링크)

캐러셀 옵션

퀵링크 등록 개수·피카부(peakaboo) 사용 여부에 따라 Carousel 속성이 달라집니다. PC Carousel 기본값: offset={40}, spaceBetween={24}.

케이스등록 개수slides-per-viewslides-per-groupnavigationpaginationclass
피카부 Y8이하등록 개수---v-carousel-centered
피카부 Y8초과8.32----
피카부 N8이하등록 개수---v-carousel-centered
피카부 N8초과81truetrue-
  • slides-per-view가 소수(8.32 등)이면 peakaboo 모드(free-mode, 좌우 slides-offset-*)가 적용됩니다.
  • v-carousel-centered: 슬라이드 수가 뷰포트보다 적을 때 가운데 정렬합니다.
Astro
---
import Title from "@shared/ui/title/Title.astro";
import Carousel from "@pc/module/carousel/Carousel.astro";
import QuickLink from "@shared/module/quick-link/QuickLink.astro";


const quickLinks = [
  {
    to: "/link/to/brand",
    name: { text: "BRAND NAME" },
    media: {
      src: "/path/to/image.jpg",
      width: 350,
      height: 525,
    },
  },
  /* … */
];
---


<section class="v-tmpl v-tmpl--img-quicklink">
  <Title level={2}>Title</Title>


  {/* 9개 이상 · 피카부 Y */}
  <Carousel slidesPerView={8.32} pagination={false} navigation={false}>
    {
      quickLinks.map((item) => (
        <swiper-slide>
          <QuickLink {...item} />
        </swiper-slide>
      ))
    }
  </Carousel>


  {/* 8개 이하 · 가운데 정렬 */}
  <Carousel
    slidesPerView={quickLinks.length}
    slidesPerGroup={quickLinks.length}
    pagination={false}
    navigation={false}
    class="v-carousel-centered"
  >
    {
      quickLinks.map((item) => (
        <swiper-slide>
          <QuickLink {...item} />
        </swiper-slide>
      ))
    }
  </Carousel>


  {/* 8 노출 · 9개 이상 · 네비·인디 (피카부 N) */}
  <Carousel
    slidesPerView={8}
    slidesPerGroup={1}
    pagination={true}
    navigation={true}
  >
    {
      quickLinks.map((item) => (
        <swiper-slide>
          <QuickLink {...item} />
        </swiper-slide>
      ))
    }
  </Carousel>
</section>

Props (QuickLink):

  • to: string: 링크 URL
  • media: ComponentProps<typeof MediaEmbed>: 이미지/동영상. MediaEmbed 참조
  • name?: TextContent: 브랜드명 (TextBox props)

미리보기

피카부Y - 4

1 BRAND NAME
2 BRAND NAME
3 BRAND NAME
4 BRAND NAME

피카부Y - 9 이상

1 BRAND NAME
2 BRAND NAME
3 BRAND NAME
4 BRAND NAME
5 BRAND NAME
6 BRAND NAME
7 BRAND NAME
8 BRAND NAME
9 BRAND NAME
10 BRAND NAME
11 BRAND NAME
12 BRAND NAME

피카부N - 4

1 BRAND NAME
2 BRAND NAME
3 BRAND NAME
4 BRAND NAME

피카부N - 9 이상

1 BRAND NAME
2 BRAND NAME
3 BRAND NAME
4 BRAND NAME
5 BRAND NAME
6 BRAND NAME
7 BRAND NAME
8 BRAND NAME
9 BRAND NAME
10 BRAND NAME
11 BRAND NAME
12 BRAND NAME
HTML — 8개 이하 · 피카부 Y (가운데 정렬)
<section class="v-tmpl v-tmpl--img-quicklink">
  <h2 class="v-title v-truncate">Title</h2>


  <script type="module">
    if (!window.customElements.get("swiper-container")) {
      import("/ui/lib/swiper/swiper-element-customized-bundle.min.js");
    }
  </script>


  <swiper-container
    slides-offset-before="40"
    slides-offset-after="40"
    space-between="24"
    slides-per-view="4"
    slides-per-group="4"
    free-mode="true"
    class="v-carousel v-carousel-centered"
  >
    <swiper-slide>
      <a href="/path/to/brand" class="v-quick-link">
        <div class="v-media-embed">
          <img
            class="v-media-embed__element v-media-embed__image"
            src="/path/to/image.jpg"
            width="350"
            height="525"
            alt=""
          />
        </div>
        <span class="v-quick-link__text v-font-bold">BRAND NAME</span>
      </a>
    </swiper-slide>
    <!-- … -->
  </swiper-container>
</section>
HTML — 9개 이상 · 피카부 Y
<swiper-container
  slides-offset-before="40"
  slides-offset-after="40"
  space-between="24"
  slides-per-view="8.32"
  free-mode="true"
  class="v-carousel"
>
  <!-- swiper-slide … -->
</swiper-container>
HTML — 8개 이하 · 피카부 N (가운데 정렬)
<section class="v-tmpl v-tmpl--img-quicklink">
  <h2 class="v-title v-truncate">Title</h2>


  <script type="module">
    if (!window.customElements.get("swiper-container")) {
      import("/ui/lib/swiper/swiper-element-customized-bundle.min.js");
    }
  </script>


  <swiper-container
    space-between="24"
    slides-per-view="4"
    slides-per-group="4"
    class="v-carousel v-carousel-centered"
  >
    <swiper-slide>
      <a href="/path/to/brand" class="v-quick-link">
        <div class="v-media-embed">
          <img
            class="v-media-embed__element v-media-embed__image"
            src="/path/to/image.jpg"
            width="350"
            height="525"
            alt=""
          />
        </div>
        <span class="v-quick-link__text v-font-bold">BRAND NAME</span>
      </a>
    </swiper-slide>
    <!-- … -->
  </swiper-container>
</section>
HTML — 9개 이상 · 피카부 N (네비·인디)
<swiper-container
  space-between="24"
  slides-per-view="8"
  slides-per-group="1"
  navigation="true"
  pagination="true"
  class="v-carousel"
>
  <!-- swiper-slide … -->
</swiper-container>