Img(퀵링크)

샘플 페이지

Astro

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

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

<Carousel slidesPerView={5.55}>
  {
    quickLinks.map((item) => (
      <swiper-slide>
        <QuickLink {...item} />
      </swiper-slide>
    ))
  }
</Carousel>

Props:

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

<swiper-container
  slides-offset-before="40"
  slides-offset-after="40"
  space-between="24"
  slides-per-view="5.55"
  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>