Img(퀵링크)

샘플 페이지

모듈 구성

• 코너 타이틀
• 퀵 링크

Astro

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

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

<section class="v-tmpl v-tmpl--img-text-3">
  <Title level={2}>Title</Title>
  <Carousel slidesPerView={2.7551}>
    {
      data.map((item) => (
        <swiper-slide>
          <QuickLink {...item} />
        </swiper-slide>
      ))
    }
  </Carousel>
</section>

Title

<section class="v-tmpl v-tmpl--img-text-3">
  <h2 class="v-truncate v-title">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="24"
    slides-offset-after="24"
    space-between="8"
    slides-per-view="2.7551"
    free-mode="true"
    sticky="true"
    class="v-carousel"
  >
    <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"
            alt=""
            width="350"
            height="525"
          />
        </div>
        <span class="v-quick-link__text v-font-bold">BRAND NAME</span>
      </a>
    </swiper-slide>
    <!-- … -->
  </swiper-container>
</section>