piratezon_new/app/components/block/mainSwiperLincoln.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">
            <video v-if="slide.type === 'video'" muted loop autoplay playsinline>
              <source :src="slide.video" type="video/mp4">
            </video>
            <img v-else :src="slide.image" :alt="slide.title" />
          </div>
          <div class="title--wrap" v-if="slide.title">
            <h2>{{ slide.title }}</h2>
            <p v-html="slide.subTitle"></p>
            <div class="btn--wrap">
              <NuxtLink class="btn--white" to="/lincoln/network">시승 신청</NuxtLink>
              <NuxtLink class="btn--orange" :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;
  };

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

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

  const slides = computed(() => [
    // {
    //   type: "video",
    //   title: "",
    //   subTitle: "",
    //   href: "",
    //   pagingTitle: "NAUTILUS",
    //   video: "/img/main--lincoln--visual.mp4",
    // },
    {
      title: "",
      subTitle: "",
      href: "",
      pagingTitle: "NAUTILUS",
      image: isMobile.value
        ? "/img/main--nautilus--visual3--mo.jpg"
        : "/img/main--nautilus--visual3.jpg",
    },
    {
      title: "THE NEW LINCOLN NAVIGATOR",
      subTitle: "EXPERIENCE OF A PACKAGE ADVANCED TECHNOLOGIES",
      href: "/lincoln/vehicle/navigator",
      pagingTitle: "NAVIGATOR",
      image: isMobile.value
        ? "/img/main--lincoln--visual1--mo.png"
        : "/img/main--lincoln--visual1.png",
    },
    {
      title: "THE NEW LINCOLN AVIATOR",
      subTitle: "Way To The Shipped Exit",
      href: "/lincoln/vehicle/aviator",
      pagingTitle: "AVIATOR",
      image: isMobile.value
        ? "/img/main--lincoln--visual2--mo.png"
        : "/img/main--lincoln--visual2.png",
    },
    
  ]);

  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>