Skip to content

Img(1)+Text(안)

샘플 페이지
모듈 구성

Title

MediaBanner

Astro

---
import Title from "@shared/ui/title/Title.astro";
import MediaBanner from "@/shared/module/media-banner/MediaBanner.astro";
import Carousel from "@shared/module/carousel/Carousel.astro";

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

<section class="v-tmpl v-tmpl--img-text-1" style="margin-bottom: 0px;">
  <Title level={2}>WIDE (Autoplay + Loop)</Title>
  <!--
  - hasBanner:
    - 없음 : 화면 우측에 다음 슬라이드 보임 (spaceBetween에 기본값 8 적용)
    - 있음 : 화면 우측에 다음 슬라이드 안보임 (spaceBetween에 offset값(기본 24) 적용)
  - wide: 와이드 적용 (hasBanner보다 우선함)
   -->
  <Carousel
    class="v-media_aspect_default"
    hasBanner
    wide
    autoplay
    loop
  >
    {data.map((item) => (
      <swiper-slide>
        <!--
        - 와이드형이어도 wide 적용 필요 없음:
          - layered 적용시 와이드 스타일 자동 적용됨
        -->
        <!-- MediaBanner 문서 참고 -->
        <MediaBanner
          {...item}
          style="layered"
        />
      </swiper-slide>
    ))}
  </Carousel>
</section>

HTML

<section class="v-tmpl v-tmpl--img-text-1" style="margin-bottom: 0px">
  <h2 class="v-truncate v-title">WIDE (Autoplay + Loop)</h2>
  <script type="module">
    if (!window.customElements.get('swiper-container')) {
      import('/ui/lib/swiper/swiper-element-customized-bundle.min.js');
    }
  </script>

  <!-- 1 / 1.5 비율 클래스: v-media_aspect_default -->
  <!-- 와이드형 클래스: v-carousel--wide -->
  <swiper-container
    class="v-carousel v-media_aspect_default v-carousel--wide"
    space-between="24"
    slides-per-view="1"
    slides-per-group="1"
    navigation="true"
    pagination="true"
    autoplay
    loop
  >
    <swiper-slide>
      <!-- MediaBanner 문서 참고 -->
      <div class="v-media-banner v-media-banner--layered">
        ...
      </div>
    </swiper-slide>
    ...
  </swiper-container>
</section>

Preview

WIDE (Autoplay + Loop)