piratezon_new/app/components/block/mainSwiper.vue

<template>
  <div class="main--swiper--wrap">
    <swiper
      :modules="[EffectFade]"
      :slides-per-view="1"
      :space-between="0"
      :speed="300"
      effect="fade"
      :fadeEffect="{ crossFade: true }"
      @swiper="onSwiper"
      @slideChange="onSlideChange"
      class="main--swiper"
    >
      <swiper-slide v-for="(slide, index) in slides" :key="index">
        <div class="slide--content">
          <div class="img--wrap">
            <img v-if="slide.image" :src="slide.image" :alt="slide.title" />
            <video
                v-if="slide.video"
                autoplay
                muted
                loop
                playsinline
                :poster="slide.video"
                controlslist="nodownload noplaybackrate"
                disablepictureinpicture
                preload="metadata"
              >
                <source :src="slide.video" type="video/mp4" />
              </video>
          </div>
          <div class="title--wrap">
            <h2>{{ slide.title }}</h2>
            <p v-html="slide.subTitle"></p>
            <div class="btn--wrap" v-if="slide.btnHidden != 'hidden'">
              <NuxtLink class="btn--white" to="/ford/network">시승 신청</NuxtLink>
              <NuxtLink class="btn--blue" :to="slide.href">제품 정보 보기</NuxtLink>
            </div>
          </div>
        </div>
      </swiper-slide>
    </swiper>

    <div class="swiper--pagination--custom">
      <div
        v-for="(slide, index) in slides"
        :key="index"
        class="pagination--item"
        :class="{ active: currentIndex === index }"
        @click="goToSlide(index)"
      >
        <h2 v-html="slide.pagingTitle"></h2>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue';
import { Swiper, SwiperSlide } from 'swiper/vue';
import { EffectFade } from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/effect-fade';

const isMobile = ref(false);

const checkMobile = () => {
  isMobile.value = window.innerWidth <= 768;
};

const isAfterLaunch = useTimeSwitch('2026-04-15T08:00:00+09:00');


onMounted(() => {
  checkMobile();
  window.addEventListener('resize', checkMobile);
});

onUnmounted(() => {
  window.removeEventListener('resize', checkMobile);
});

const slides = 
isAfterLaunch.value == false ?
computed(() => [  
  {
    title: "",
    subTitle: "",
    pagingTitle: 'EXPLORER',
    image: isMobile.value ? '/img/main--visual11--mo.jpg' : '/img/main--visual11.jpg',
    href: "/ford/vehicle/explorer",
    btnHidden : "hidden"
  },
  {
    title: "FORD EXPEDITION",
    subTitle: "최대 8명이 탑승할 수 있는 편안한 좌석은 물론, <br>FORD CO-PILOT360TM 시스템이 안전하고 편안한 주행을 지원합니다.",
    pagingTitle: 'EXPEDITION',
    image: isMobile.value ? '/img/main--visual2--mo.png' : '/img/main--visual2.png',
    href: "/ford/vehicle/expedition",
  },
  {
    title: "FORD BRONCO",
    subTitle: "광활한 대자연을 열망하고 모험을 추구하는 내면의 열정을 실현시켜줄 진정한 버디입니다.",
    pagingTitle: 'BRONCO',
    image: isMobile.value ? '/img/main--visual3--mo.png' : '/img/main--visual3.png',
    href: "/ford/vehicle/bronco",
  },
  {
    title: "FORD RANGER",
    subTitle: "지금까지 출시된 포드 레인저 중 가장 스마트하고 다재다능한 레인저를 만나보십시오.",
    pagingTitle: 'RANGER',
    image: isMobile.value ? '/img/main--visual4--mo.png' : '/img/main--visual4.png',
    href: "/ford/vehicle/ranger",
  },
  {
    title: "FORD MUSTANG",
    subTitle: "머스탱을 소유할 최고의 타이밍",
    pagingTitle: 'MUSTANG',
    image: isMobile.value ? '/img/main--visual5--mo.png' : '/img/main--visual5.png',
    href: "/ford/vehicle/mustang",
  }
]) : 
computed(() => [ 
  { 
    title: "",
    subTitle: "",
    href: "",
    pagingTitle: "EXPLORER",
    video: "https://audi.interscope.co.kr/video/flak/flak_26my_web.mp4",
    btnHidden : "hidden"
  },  
  {
    title: "FORD EXPEDITION",
    subTitle: "최대 8명이 탑승할 수 있는 편안한 좌석은 물론, <br>FORD CO-PILOT360TM 시스템이 안전하고 편안한 주행을 지원합니다.",
    pagingTitle: 'EXPEDITION',
    image: isMobile.value ? '/img/main--visual2--mo.png' : '/img/main--visual2.png',
    href: "/ford/vehicle/expedition",
  },
  {
    title: "FORD BRONCO",
    subTitle: "광활한 대자연을 열망하고 모험을 추구하는 내면의 열정을 실현시켜줄 진정한 버디입니다.",
    pagingTitle: 'BRONCO',
    image: isMobile.value ? '/img/main--visual3--mo.png' : '/img/main--visual3.png',
    href: "/ford/vehicle/bronco",
  },
  {
    title: "FORD RANGER",
    subTitle: "지금까지 출시된 포드 레인저 중 가장 스마트하고 다재다능한 레인저를 만나보십시오.",
    pagingTitle: 'RANGER',
    image: isMobile.value ? '/img/main--visual4--mo.png' : '/img/main--visual4.png',
    href: "/ford/vehicle/ranger",
  },
  {
    title: "FORD MUSTANG",
    subTitle: "머스탱을 소유할 최고의 타이밍",
    pagingTitle: 'MUSTANG',
    image: isMobile.value ? '/img/main--visual5--mo.png' : '/img/main--visual5.png',
    href: "/ford/vehicle/mustang",
  }
]);

const swiperInstance = ref(null);
const currentIndex = ref(0);

const onSwiper = (swiper) => {
  swiperInstance.value = swiper;
};

const onSlideChange = (swiper) => {
  currentIndex.value = swiper.activeIndex;
};

const goToSlide = (index) => {
  if (swiperInstance.value) {
    swiperInstance.value.slideTo(index);
  }
};
</script>