greenwhale/app/components/mainVisual.vue

<template>
  <section 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>
  </section>
</template>
<script setup>
  import { ref } 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 = document.querySelectorAll('.swiper-slide:not(.swiper-slide-duplicate)').length
    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>