piratezon_new/app/components/SwiperBanner.vue

<template>
  <section class="swiper--banner--wrapper" :data-type="type" :data-fit="fit">
    <div class="swiper--banner--container">
      <div class="swiper-button-prev" ref="prevRef" v-if="slides.length > 1">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
        >
          <path
            d="M15 18L9 12L15 6"
            stroke="white"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
        </svg>
      </div>
      <div class="swiper-pagination" ref="paginationRef" v-if="slides.length > 1"></div>
      <div class="swiper-button-next" ref="nextRef" v-if="slides.length > 1">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
        >
          <path
            d="M9 18L15 12L9 6"
            stroke="white"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
        </svg>
      </div>

      <!-- 70% 영역: 단일 배너 -->
      <div class="swiper--banner--section">
        <div class="swiper--container" ref="swiperContainer">
          <div class="swiper-wrapper">
            <div v-for="(slide, index) in slides" :key="index" class="swiper-slide">
              <div class="slide--image" v-if="slide.image">
                <picture>
                  <source
                    v-if="slide.moImage"
                    media="(max-width: 768px)"
                    :srcset="slide.moImage"
                  />
                  <img
                    :src="slide.image"
                    :alt="slide.alt || 'Banner Image'"
                    loading="lazy"
                  />
                </picture>

                <div class="desc--wrapper">
                  <h2
                    v-if="getSlideTitle(index)"
                    class="main--title"
                    v-html="getSlideTitle(index)"
                  ></h2>
                  <h3 v-if="getSlideSubtitle(index)" class="sub--title">
                    {{ getSlideSubtitle(index) }}
                  </h3>
                  <h4 v-if="getSlideSmalldesc(index)" class="desc--title">
                    {{ getSlideSmalldesc(index) }}
                  </h4>
                  <h4
                    v-if="getSlideCautiondesc(index)"
                    class="caution--title"
                    v-html="getSlideCautiondesc(index)"
                  ></h4>
                  <NuxtLink
                    v-if="getSlideMorelink(index)"
                    class="more--detail--href mt--45"
                    :to="getSlideMorelink(index)"
                    :target="getSlideTarget(index)"
                    >{{ getSlideMorelinktitle(index) }} <i class="ico"></i
                  ></NuxtLink>
                </div>
              </div>
              <div class="slide--image" v-if="slide.video">
                <video
                  autoplay
                  muted
                  loop
                  playsinline
                  :poster="slide.video"
                  controlslist="nodownload noplaybackrate"
                  disablepictureinpicture
                  preload="metadata"
                >
                  <source media="(min-width:320px)" :src="slide.video" type="video/mp4" />
                </video>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
  import { Swiper } from "swiper";
  import { Navigation, Pagination, Autoplay, EffectFade } from "swiper/modules";
  import "swiper/css";
  import "swiper/css/navigation";
  import "swiper/css/pagination";
  import "swiper/css/effect-fade";

  const { getMediaUrl } = useImage();

  // Props 정의
  const props = defineProps({
    slides: {
      type: Array,
      default: () => [],
    },
    height: {
      type: String,
      default: "60%",
    },
    title: {
      type: String,
      default: "",
    },
    subtitle: {
      type: String,
      default: "",
    },
    smalldesc: {
      type: String,
      default: "",
    },
    cautiondesc: {
      type: String,
      default: "",
    },
    morelink: {
      type: String,
      default: "",
    },
    morelinktitle: {
      type: String,
      default: "자세히 보기",
    },
    morelinktarget: {
      type: String,
      default: "_self",
    },
    notice: {
      type: String,
      default: "",
    },
    autoplay: {
      type: [Boolean, Object],
      default: () => ({ delay: 5000 }),
    },
    loop: {
      type: Boolean,
      default: true,
    },
    type: {
      type: String,
      default: "horizental", // 'horz' , 'vert'
      validator: (value) => ["horizental", "vertical"].includes(value),
    },
    fit: {
      type: String,
      default: "cover",
      validator: (value) => ["cover", "contain"].includes(value),
    },
  });

  // Refs
  const swiperContainer = ref(null);
  const paginationRef = ref(null);
  const prevRef = ref(null);
  const nextRef = ref(null);
  const textSlider = ref(null);
  let swiperInstance = null;

  // 현재 슬라이드 인덱스
  const currentSlide = ref(0);

  // 슬라이드별 텍스트 반환 함수들
  const getSlideTitle = (index) => {
    return props.slides[index]?.title || props.title;
  };

  const getSlideSubtitle = (index) => {
    return props.slides[index]?.subtitle || props.subtitle;
  };

  const getSlideSmalldesc = (index) => {
    return props.slides[index]?.smalldesc || props.smalldesc;
  };

  const getSlideMorelink = (index) => {
    return props.slides[index]?.morelink || props.morelink;
  };

  const getSlideMorelinktitle = (index) => {
    return props.slides[index]?.morelinktitle || props.morelinktitle;
  };

  const getSlideTarget = (index) => {
    return props.slides[index]?.morelinktarget || props.morelinktarget;
  };

  const getSlideCautiondesc = (index) => {
    return props.slides[index]?.cautiondesc || props.cautiondesc;
  };

  onMounted(() => {
    // Swiper 인스턴스 초기화
    swiperInstance = new Swiper(swiperContainer.value, {
      modules: [Navigation, Pagination, Autoplay],
      slidesPerView: 1,
      spaceBetween: 0,
      loop: props.loop,
      autoplay: props.autoplay
        ? {
            delay:
              typeof props.autoplay === "object" ? props.autoplay.delay || 5000 : 5000,
            disableOnInteraction: false,
            pauseOnMouseEnter: true,
          }
        : false,
      navigation: {
        nextEl: nextRef.value,
        prevEl: prevRef.value,
      },
      pagination: {
        el: paginationRef.value,
        clickable: true,
        type: "bullets",
        // renderBullet: function (index, className) {
        //   return '<span class="' + className + '">' + (index + 1) + "</span>";
        // },
      },
      effect: "fade",
      fadeEffect: {
        crossFade: true,
      },
      speed: 800,
      // 슬라이드 변경 이벤트
      on: {
        slideChange: function () {
          if (this && this.realIndex !== undefined) {
            currentSlide.value = this.realIndex;
          }
          // 모든 비디오 일시정지
          const allVideos = this.el.querySelectorAll("video");
          allVideos.forEach((video) => {
            video.pause();
            video.currentTime = 0;
          });
          // 현재 슬라이드의 비디오 재생
          const currentSlideEl = this.slides[this.activeIndex];
          if (currentSlideEl) {
            const video = currentSlideEl.querySelector("video");
            if (video) {
              video.play().catch((err) => console.log("Video play failed:", err));
            }
          }
        },
        init: function () {
          if (this && this.realIndex !== undefined) {
            currentSlide.value = this.realIndex;
          }
          // 초기 슬라이드의 비디오 재생
          const currentSlideEl = this.slides[this.activeIndex];
          if (currentSlideEl) {
            const video = currentSlideEl.querySelector("video");
            if (video) {
              video.play().catch((err) => console.log("Video play failed:", err));
            }
          }
        },
      },
    });
  });

  onUnmounted(() => {
    if (swiperInstance) {
      swiperInstance.destroy(true, true);
    }
  });
</script>