퀵 링크

Astro

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

const data = [
  /* ...*/
];
---

<Carousel slidesPerView={2.7551}>
  {
    data.map((item) => (
      <swiper-slide>
        <QuickLink to={item.to} media={item.media} text={item.text} />
      </swiper-slide>
    ))
  }
</Carousel>

Props:

• to:string: 링크 URL
• media:ComponentProps<typeof MediaEmbed>: 이미지/동영상. MediaEmbed 참조
• text?:string: 텍스트

<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>
    <a class="v-quick-link" href="/link/to/brand">
      <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>