greenwhale/app/pages/index.vue

<template>
  <main>
    <div class="main--visual--wrap">
      <div class="main--swiper--wrap">
        <swiper
          ref="mainSwiperRef"
          :pagination="{
            type: 'progressbar',
            el: '.swiper--pagination'
          }"
          :navigation="{
            nextEl: '.swiper--btn--next',
            prevEl: '.swiper--btn--prev'
          }"
          :modules="modules"
          class="main--swiper"
          loop="true"
          @swiper="onSwiper"
        >
          <!-- :autoplay="{
            delay: 3000,
            disableOnInteraction: false,
          }" -->
          <swiper-slide class="visual--img">
            <div class="txt--wrap"><h2>친환경산업의 미래를 선도하는 <br>그린웨일글로벌</h2></div>
            <div class="img--wrap"><img src="/img/main1.png" /></div>
          </swiper-slide>
          <swiper-slide class="visual--img">
            <div class="txt--wrap"><h2>친환경산업의 미래를 선도하는 <br>그린웨일글로벌</h2></div>
            <div class="img--wrap"><img src="/img/main2.png" /></div>
          </swiper-slide>
          <swiper-slide class="visual--img">
            <div class="txt--wrap"><h2>친환경산업의 미래를 선도하는 <br>그린웨일글로벌</h2></div>
            <div class="img--wrap"><img src="/img/main3.png" /></div>
          </swiper-slide>
        </swiper>

        <div class="swiper--control--wrap">
          <div class="pagination--wrap">
            <span class="current">{{ currentSlide }}</span>
            <span class="bar"></span>
            <span class="total">{{ totalSlides }}</span>
          </div>
          <div class="swiper--pagination"></div>
          <div class="swiper--btn--wrap">
            <div class="swiper--btn--prev"></div>
            <button @click="toggleAutoplay" :class="['play--btn', { 'pause': !isPlaying }]">
            </button>
            <div class="swiper--btn--next"></div>
          </div>
        </div>
      </div>
    </div>
  </main>
</template>
<script setup>
  import { ref, onMounted } from 'vue'
  import { Swiper, SwiperSlide } from 'swiper/vue';
  import { Navigation, Pagination, Autoplay } from 'swiper/modules';
  import 'swiper/css';
  import 'swiper/css/navigation';
  import 'swiper/css/pagination';

  const mainSwiperRef = ref(null)
  const swiperInstance = ref(null)
  const currentSlide = ref(1)
  const totalSlides = ref(0)
  const isPlaying = ref(true)

  const modules = [Navigation, Pagination, Autoplay]

  const onSwiper = (swiper) => {
    swiperInstance.value = swiper
    totalSlides.value = 3 // 실제 슬라이드 개수
    swiper.on('slideChange', () => {
      currentSlide.value = swiper.realIndex + 1
    })
  }

  const toggleAutoplay = () => {
    if (swiperInstance.value) {
      if (isPlaying.value) {
        swiperInstance.value.autoplay.stop()
      } else {
        swiperInstance.value.autoplay.start()
      }
      isPlaying.value = !isPlaying.value
    }
  }
</script>